16

我有一个加载的页面，加载后，它会拉入一个 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>

当用户单击快速视图但没有任何运气时，我试图让花哨的框触发。有任何想法吗？

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

也试过：

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

http://fancybox.net/

感谢您的任何想法...

4

5 回答 5

30

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

我首选的解决方案是从现场活动中手动触发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/。

于 2011-10-12T13:56:27.727 回答
23

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

$(document).ajaxStop(function() { 
    $("#whatever").fancybox();
});
于 2011-02-17T15:08:38.510 回答
11

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

于 2010-09-07T00:04:01.373 回答
4

既然.on现在被推荐了.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;
});
于 2013-02-11T23:01:32.693 回答
2

根据我对Fancybox的理解，对 simple的调用会将fancybox()插件附加到所选元素。调用事件不会打开任何东西fancybox。click

我想你只需要添加

$(li_element_that_you_create).fancybox();

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

编辑

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

$('#ul_id_goes_here').load('source/of/news.feed', function() {
  $('.quickview').fancybox();
});
于 2010-03-28T16:07:30.187 回答