Fancybox插件如何为动态添加的元素绑定事件

最新推荐文章于 2025-12-02 17:50:12 发布

转载最新推荐文章于 2025-12-02 17:50:12 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/momomo1987/blog/1204361

文章标签：

#javascript #python #ViewUI

本文介绍了一种解决jQuery fancyBox插件无法正确绑定到动态创建元素的问题的方法。通过使用`.on()`来代替已废弃的`.live()`和`.die()`，确保了即使是后期加入DOM的元素也能成功触发fancybox事件。

2019独角兽企业重金招聘Python工程师标准>>>

网上找到错误方法

打开 jquery.mousewheel-3.0.4.pack.js，然后搜索  click.fb ，共有2处，分别把2处前面的 unbind 和 bind  改成 die  live
例如
$.fn.fancybox = function(options) {$(this)  .die('click.fb')  .live('click.fb', function(e) { 
 
这样一来，获取源文件再创建的元素，或者直接动态创建的元素也可以绑定 fancybox 事件

jquery.fancybox-1.3.4.pack中才有click.fb；并且jquery1.7以后删除了die live。

可以使用的方法是利用焦点事件刷新插件事件；

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

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

转载于:https://my.oschina.net/momomo1987/blog/1204361

Fancybox插件 如何为动态添加的元素绑定事件

Fancybox插件如何为动态添加的元素绑定事件