javascript - colorbox(使用 live)在 ​​jQuery ajax 调用后没有重新绑定(bind)

Question

我有一个通过 ajax(使用 jQuery 的 .load())加载的元素列表。这些元素中的每一个旁边都有一个(编辑)链接，灯箱(使用颜色框)有点编辑形式。当灯箱关闭时，我使用 onClosed 回调重新加载 ajax 列表以显示和编辑期间所做的更改。

colorbox 调用看起来像这样:

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

我的列表是这样的:

<div id="featureList">
  <ul id="features">
    <li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=0">Edit</a>)</li>
    <li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=1">Edit</a>)</li>
  </ul>
</div>

我查看了 colorbox source code并看到它使用 jquery live() 进行绑定(bind)。在这里:

$('.' + boxElement).live('click', function (e) {
  if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {
    return true;
  } else {
    launch(this);   
    return false;
  }
});

您可以在上面看到 colorbox 的工作方式是绑定(bind)到“boxElement”，这是它创建的一个名为“cboxElement”的类。在 live() 绑定(bind) colorbox 之前，将此类 (cboxElement) 添加到与选择器匹配的所有元素(在我的示例中为 .colorbox)，然后绑定(bind)到这个新类。

所以认为如果我将 colorbox 绑定(bind)放在 ajax 内容之外，它会在我用 ajax 替换 #featureList div 后绑定(bind)到链接，因为 live() 应该“现在或将来”绑定(bind)到元素.但这不是因为它绑定(bind)到 .cboxElement 而不是 .colorbox 所以当 ajax 重新加载 colorbox 时不会将 .cboxElement 类重新添加到元素。

我尝试在 ajax 内容中调用 $.fn.colorbox.init() 来让 colorbox 将 .cboxElement 类重新添加到元素中，但这没有效果。 (我在处理 shadowbox 时做了类似的事情，但它似乎对 colorbox 不起作用。)

然后我尝试将所有颜色框代码放在 ajax 内容中。当我这样做时，颜色框绑定(bind)正在堆叠/链接。所以我第二次调用它时，我得到了两个颜色框(并且必须点击“关闭”按钮两次才能返回主屏幕)。第三次我得到三个。这是因为当我再次调用 colorbox 时，它添加了 .cboxElement 类，使旧的 live() 绑定(bind)再次激活，并且它还添加了另一个 live() 绑定(bind)。我试图通过先调用 .die() 来清除 .live() 绑定(bind)，但由于某种原因它不起作用。

我找到了几个相关的帖子，但没有一个解决了这个问题，因为 colorbox 已经在使用 live():
Problem with jQuery Colorbox
jQuery AJAX table to a page but now the colorbox overlays no longer work

还有其他想法吗？我真的很难过。我觉得我应该换一个不同的灯箱，但总的来说我喜欢 colorbox 并且在出现这个 ajax 问题之前它在网站的其他任何地方都运行良好。

谢谢!!!

编辑:

因此，在这种情况中，我的问题是我的框架 ( Yii ) 在每个 AJAX 调用中包含重复的 colorbox 脚本，这导致了问题。所以要小心!

对于没有遇到重复脚本问题的每个人来说: @Relic 在下面指出你可以通过自己做来“回避”一些问题 jQuery delegate() bind 对 colorbox 进行“直接调用”，而不是依赖于 colorbox 的默认 live() 绑定(bind)。对于我的情况，我会像这样调整它:

$(document).delegate("#features a", "click", function (event) { // $.colorbox() call  }

Answer 1

首先，您不应该使用 .live()，它已被弃用。相反，学习如何使用 .delegate() 您会发现这是一个更强大的监听器，将有助于解决您的问题。

最初加载页面时，DOM 已准备就绪，并且颜色框已为选择器初始化 AJAX 使用颜色框选择器列表中的一些 DOM 元素调用页面的新部分，但未被注意到，因为它是在 javascript 读取选择器后加载到页面中的。

尝试以下操作 - 因为它会监视 body #main 中所有现有的和新的 a[rel='lightbox']:

$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

编辑“.on()”

$("body #main").on("click", "a[rel='lightbox']", function (event) {
                        event.preventDefault();
                        $.colorbox({href: $(this).attr("href"),
                                transition: "fade",
                                innerHeight: '515px',
                                innerWidth: '579px',
                                overlayClose: true,
                                iframe: true,
                                opacity: 0.3
                         });
});

是的，很大的变化，我知道，但重点是“on”方法也可以用作“bind”，所以这很酷。