jQuery Fancybox，让 Fancybox 使用 LIVE() 绑定到加载后加载到页面上的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2532070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load
提问by AnApprentice
I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.
我有一个页面加载后，它会拉入一个 LI 列表来填充新闻提要。
<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>
I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?
当用户点击快速查看但没有任何运气时，我试图让花哨的框触发。有任何想法吗？
$(document).ready(function() {
$('.quickview').fancybox();
});
also tried:
也试过：
$(document).ready(function() {
$('a.quickview').live('click', function() {
$(this).fancybox();
});
});
Thanks for any ideas...
感谢您的任何想法...
采纳答案by Donny Kurnia
The problems is to attach fancybox into AJAX loaded element, right?
问题是将fancybox附加到AJAX加载的元素中，对吗？
I got same problems and I found this solution.
我遇到了同样的问题，我找到了这个解决方案。
I copy paste it here, see the original bug report for more info:
我将其复制粘贴到此处，有关详细信息，请参阅原始错误报告：
$.fn.fancybox = function(options) {
$(this)
.die('click.fb')
.live('click.fb', function(e) {
$(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
e.preventDefault();
[...]
Credit goes to jeff.gran.
幸得jeff.gran。
回答by Steve
Old question, but might be useful for future searchers.
老问题，但可能对未来的搜索者有用。
My preferred solution is to fire fancybox manually from within the live event, eg:
我的首选解决方案是从现场活动中手动触发fancybox，例如：
$('.lightbox').live('click', function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.attr('href'),
type: 'iframe',
width: '100%'
});
return false;
});
EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/for more info.
编辑：从 jQuery 1.7 live() 被弃用，应该使用 on() 代替。有关更多信息，请参阅http://api.jquery.com/live/。
回答by mononym
this should work after every ajax request
这应该在每个 ajax 请求之后工作
$(document).ajaxStop(function() {
$("#whatever").fancybox();
});
回答by mltsy
Since .onis now recommended over .live, and after reading over the documentation on delegated events, here's a solution I came up with (assuming your elements have a class of 'trigger-modal'):
由于.on现在推荐 over .live，并且在阅读了有关委托事件的文档后，这是我想出的一个解决方案（假设您的元素具有一类“触发模式”）：
$(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;
});
回答by Dancrumb
From my understanding of Fancybox, the call to fancybox()simple attaches the plugin to the selected element. Calling fancyboxon a clickevent won't open anything.
根据我对Fancybox 的理解，对simple的调用fancybox()将插件附加到所选元素。调用fancybox一个click事件将不会开启任何东西。
I think you just need to add
我想你只需要添加
$(li_element_that_you_create).fancybox();
to the code that creates the new LIelements in your list
到LI在列表中创建新元素的代码
EDIT
编辑
If you're using load, then you would do something like:
如果您正在使用load，那么您会执行以下操作：
$('#ul_id_goes_here').load('source/of/news.feed', function() {
$('.quickview').fancybox();
});
