Fancybox，让Fancybox使用LIVE（）绑定到加载后加载到页面上的项目

我有一个加载的页面，加载后，它会输入一个LI列表来填充新闻源。

quick view
 
quick view
 
quick view 

当用户点击快速查看但没有运气时，我正试图让奇特的盒子触发。 有任何想法吗？

 $(document).ready(function() { $('.quickview').fancybox(); }); 

还尝试过：

 $(document).ready(function() { $('a.quickview').live('click', function() { $(this).fancybox(); }); }); 

http://fancybox.net/

谢谢你的任何想法……

Answer 1

问题是将fancybox附加到AJAX加载元素中，对吧？

我有同样的问题，我找到了这个解决方案 。

我将其复制粘贴到此处，请参阅原始错误报告以获取更多信息：

 $.fn.fancybox = function(options) { $(this) .die('click.fb') .live('click.fb', function(e) { $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) e.preventDefault(); [...] 

归功于jeff.gran 。

Answer 2

旧问题，但可能对未来的搜索者有用。

我首选的解决方案是从直播活动中手动启动fancybox，例如：

 $('.lightbox').live('click', function() { $this = $(this); $.fancybox({ height: '100%', href: $this.attr('href'), type: 'iframe', width: '100%' }); return false; }); 

编辑：从jQuery 1.7不推荐使用live（），而应该使用on（）。 有关详细信息，请参阅http://api.jquery.com/live/ 。

Answer 3

这应该在每个ajax请求之后工作

 $(document).ajaxStop(function() { $("#whatever").fancybox(); }); 

Answer 4

因为.on现在推荐使用.live ，在阅读了委托事件的文档之后，这里提出了一个解决方案（假设你的元素有一个’trigger-modal’类）：

 $(document).on('click', '.trigger-modal', function() { // remove the class to ensure this will only run once $(this).removeClass('trigger-modal'); // now attach fancybox and click to open it $(this).fancybox().click(); // prevent default action return false; }); 

Answer 5

根据我对Fancybox的理解，对fancybox()的调用简单地将插件附加到所选元素。 在click事件上调用fancybox不会打开任何内容。

我想你只需要添加

 $(li_element_that_you_create).fancybox(); 

到列表中创建新LI元素的代码

编辑

如果您正在使用load ，那么您将执行以下操作：

 $('#ul_id_goes_here').load('source/of/news.feed', function() { $('.quickview').fancybox(); });