Блог

Главная - Вопросы по программированию - Не удается загрузить fancybox из функции, но он работает вне функции

Не удается загрузить fancybox из функции, но он работает вне функции

#javascript #php #jquery #fancybox

#javascript #php #jquery #fancybox

Вопрос:

Я пытаюсь загрузить fancybox одним щелчком мыши даже внутри функции. Он будет работать вне функции javascript, но не будет работать внутри функции.

Пример: это работает при загрузке страницы и сразу открывает fancybox:

 $.fancybox.open({
    width: 400,
    height: 400,
    autoSize: false,
    href: '/manager/users/edit/1',
    type: 'iframe' 
});

Если я прослушиваю событие щелчка, оно не работает:

 $(document).ready(function ()
{
    $('.edit_user').click( function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });
});

Onclick, который завершается с ошибкой и возвращает:

Неперехваченная ошибка типа: не удается прочитать свойство ‘open’ неопределенного.

Любая информация будет с благодарностью принята

Комментарии:

1. эти 2 примера взяты с одной страницы или с разных страниц?

2. Да, то же самое точное размещение на странице. Если я заменю первый пример на 2-й пример, я получу сообщение об ошибке. Хотя первый пример работает нормально без щелчка.

3. это очень странно … не уверен, почему, но посмотрите, работает ли мой ответ…

Ответ №1:

как насчет этого?

     $(document).on('click', '.edit_user', function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });

или в зависимости от вашей версии jquery

     $('.edit_user').live('click', function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });

Комментарии:

1. Ошибка неперехваченного типа: не удается прочитать свойство ‘fancybox’ неопределенного

2. По какой-то причине fanxybox, похоже, скрыт для моих функций… Это очень странно.

3. ваш первый пример работает с блоком document.ready или без него?

4. Если я оберну первый пример в document.ready, он также завершится неудачей

5. Отрицательный, если я вынимаю document.ready и просто оставляю функцию щелчка, я все равно получаю сообщение об ошибке. Document.ready был просто попыткой решить эту проблему.

Ответ №2:

похоже, разница в версиях библиотеки jquery, после того, как вы процитировали, я попытался локально реализовать это. у меня это сработало при событии щелчка. это код, который я пробовал.

 $(document).ready(function() {
        $("#clickme").click(function() {
                    $.fancybox.open({
                    width: 400,
                    height: 400,
                    autoSize: false,
                    href: 'index.html',
                    type: 'iframe' 
                });
            });
        });

Завершите код, который я опробовал.

 <!DOCTYPE html>
<html>
<head>
    <title>fancyBox Tryout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }

        body {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>fancyBox <a href="javascript:void(0);" id="clickme">click</a></h1>

    <script type="text/javascript">
        $(document).ready(function() {
        $("#clickme").click(function() {
                    $.fancybox.open({
                    width: 400,
                    height: 400,
                    autoSize: false,
                    href: 'index.php',
                    type: 'iframe' 
                });
            });
        });
    </script>
</body>
</html>

Комментарии:

1. какую версию jquery вы использовали для этого?

2. Да, это именно то, что я делаю, но для класса not и ID, который не должен иметь значения. Он должен работать, где-то еще в моем коде должен быть конфликт. Я выбираю другой маршрут. Спасибо за вашу помощь.

Метки: ,