Fancybox，使用LIVE()将Fancybox绑定到在加载后添加到页面上的项目

Question

我有一个页面，它加载完成后会拉取一些列表项（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>

我正在尝试让FancyBox在用户单击快速查看时触发，但是没有成功。有什么建议吗？

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

也尝试过：

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

http://fancybox.net/

谢谢任何想法...

- AnApprentice

Answer 1

虽然这是一个旧问题，但对今后的搜索者可能仍有用。

我个人喜欢的解决方案是在live事件中手动触发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/了解更多信息。

- Steve

---

非常感谢您抽出时间提供这个解决方案，我百分之百地喜欢它。 - John Magnolia

你能这样使用“画廊”功能吗？（下一个/上一个链接） - Mirko

这绝对是我首选的解决方案，而且它运行得非常好... 做得好！ - Mathieu Dumoulin

请注意这个重要的部分：href: $this.attr('href')。 - James P.

如果有帮助的话，我在使用 on 时遇到了问题，并意识到我必须像这个回答所述一样调用ajax内容的静态父级。 - waffl

Answer 2

每次ajax请求后应该可以正常工作

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

- mononym

---

这是一个更好的解决方案。避免使用live()是一个好习惯。 - Evert

Answer 3

问题是要将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。

- Donny Kurnia

---

那个解决方案破坏了我的常规相册，但我能够在这里发表评论并修复它：http://code.google.com/p/fancybox/issues/detail?id=18#c47 - Sonny

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;
});

- mltsy

---

$(document).on('click', '.trigger-modal', function() { $.fancybox(); return false; }); - ChrisV

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

- Dancrumb

---

我不是在跟踪，我正在使用JQUERY加载？ - AnApprentice