Javascript 如何将fancybox绑定到动态添加的元素？

我使用jquery fancybox 1.3.4作为pop表单

但我发现fancybox无法绑定到动态添加的元素。例如，当我向当前文档添加html元素时

像这样： 首先，我使用jquery将一个元素附加到body中

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

但是fancybox不能与动态添加的元素一起工作

---

我不能从这个元素调用fancybox

您指定了错误的类名，请尝试以下操作：

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

---

你可以试试这样的东西，也许：

 $(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'
            }
        );
}

---

将fancybox v1.3.x绑定到动态添加的元素的最简单方法是：

1：如果还没有升级到jQuery v1.7.x

2：使用+focusin事件设置脚本

要使其正常工作，您需要根据上面的代码找到class=ajaxFancyBox的元素的父元素，或者根据需要找到父元素的父元素，并将jQuery附加到它上，例如，使用以下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>

您可以根据需要应用任何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+在内的大多数浏览器中都能正常工作

更新：2012年3月7日

我被告知，这种方法仅在向页面添加新内容时有效，而在替换页面内容时无效

该方法实际上适用于上述两种场景中的任何一种。只需确保新的替换内容也加载到应用.on方法的容器中即可

---

Chrome的tabindex变通方法也适用。

我回答了与此相同的问题，您可以在

---

正如上面评论中所建议的，我们可以在这种将元素绑定到动态元素的问题中使用以下方法-

$("#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

---

对不起，我打字时出错了。那门课是ajaxFancyBoxI我回答了这个问题看，当fancybox事件已经绑定在第一个焦点上时，继续绑定它是好的吗？@邓博士：这是一个好问题，我同意不反复绑定fancybox是有意义的。但是，请记住，我们可能无法控制最近动态添加到DOM中的元素。验证哪些元素是绑定的，哪些元素不是绑定的将是非常困难的，因此这种方法完全解决了这种情况。这个答案已经很老了，是针对旧版本的fancybox v2.x的，没有这个问题。我不认为这违背了最佳实践，因为事件委派有时是唯一的方法。谢谢JFK。。。。有关fancybox 2.0的信息，但我认为我们可以为上述解决方案提供更好的解决方案。SOL 1：如果我们在绑定FANCYBOX事件之后添加自定义类，并且下次首先检查自定义类。@ Dr.dang:如果您认为它提出了更好的解决方案，则总是欢迎您发布自己的答案。不要忘记提供文档化的代码，如果可能的话，还可以提供一个人们可以参考的演示；

<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>

$("#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