Подтвердить что ты не робот

Как связать fancybox с динамическим добавленным элементом?

Я использую jQuery fancybox 1.3.4 как pop-форму.

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

вот так: сначала я добавляю элемент для использования jQuery для тела,

  $(document.body).append("<a href="home/index" class="fancybox"/>");

и я вызываю fancybox,

  $(".ajaxFancyBox").fancybox({padding: 0});

но fancybox не работает с динамическим добавленным элементом.

и я не могу вызвать fancybox из этого элемента?

Я родом из Китая. поэтому мой английский плохой, пожалуйста, прости меня.

4b9b3361

ОТВЕТЫ

Ответ 1

Самый простой способ связать fancybox (v1.3.x) с динамически добавленными элементами:

1: перейти на jQuery v1.7.x(если вы еще этого не сделали)

2: Установите script с помощью jQuery API on() + focusin.

Чтобы сделать это, вам нужно найти элемент parent ваших элементов с помощью class="ajaxFancyBox" в соответствии с вашим кодом выше (или parent parent по мере необходимости) и прикрепить jQuery on() к это так, например, имея этот html:

<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

.. мы применим событие on() и focusin к элементу с id="container" (parent), как в приведенном выше примере, например:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on

Вы можете применить любой вариант fancybox по мере необходимости. Кроме того, у вас могут быть разные сценарии для разных типов контента (внутри метода on()), например:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
 $("a.iframeFancyBox").fancybox({
  // fancybox API options here
  'padding': 0,
  'width': 640,
  'height': 320,
  'type': 'iframe'
 }); // fancybox
}); // on

ВАЖНО: приведенный выше пример не будет работать так, как в Chrome. обходной путь заключается в добавлении атрибута tabindex ко всем вашим элементам, связанным с fancybox, например

<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

который решает проблему и будет работать (насколько мне известно) в большинстве браузеров, включая IE7 +.

Смотрите мою демо-страницу здесь

ОБНОВЛЕНИЕ: 07 марта 2012 г.

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

Метод фактически работает на любом из двух описанных выше сценариев. Просто убедитесь, что новый заменяющий контент также загружен внутри контейнера, где вы применили метод .on().

Смотрите демонстрацию

Обходной путь tabindex для Chrome также применяется.

Ответ 2

Вы указываете неправильное имя класса, попробуйте вместо этого:

$(".fancybox").fancybox({padding: 0});

Ответ 3

Вы могли бы попробовать что-то вроде этого, возможно:

 $(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>");

И затем создайте функцию для создания и отображения Fancybox:

function showFancybox(){
    $.fancybox(
            '<h2>Hi!</h2><p>Content of popup</p>',
            {
                    'autoDimensions'    : false,
                'width'             : 350,
                'height'            : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            }
        );
}

Ответ 4

Как показано в предыдущем комментарии, мы можем использовать следующий подход в этом виде проблем (привязка элемента к динамическим элементам) -

$("#container").on("focusin", function(){

    if($(this).hasClass("fancybox-bind")){                //check if custom class exist 
       return 0;                                          //now fancybox event will not be binded
    }else{                                                //add class to container
        $(this).addClass("fancybox-bind");
    }

    $("a.ajaxFancyBox").fancybox({                        // fancybox API options here
        'padding': 0
    }); // fancybox

   $("a.iframeFancyBox").fancybox({                       // fancybox API options here
     'padding': 0,
     'width': 640,
     'height': 320,
     'type': 'iframe'
   }); // fancybox
}); // on