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>

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

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

也尝试过：

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

http://fancybox.net/

感谢任何想法...

Answer 1

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

我首选的解决方案是在直播活动中手动启动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 2

这应该在每次ajax请求之后起作用

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

Answer 3

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

我遇到了同样的问题，我找到了this solution。

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

$.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 4

现在推荐.on超过.live，在阅读了documentation on delegated events之后，我提出了一个解决方案（假设你的元素有一类'触发模式' ）：

$(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()的调用简单地将插件附加到所选元素。在fancybox事件上拨打click不会打开任何内容。

我认为你只需要添加

$(li_element_that_you_create).fancybox();

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

修改

如果您使用的是load，那么您可以执行以下操作：

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

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

5 个答案: