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()来执行绑定。这是：

$('.' + 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;
  }
});

你可以通过绑定到“boxElement”来看到上面colorbox的工作方式，这是一个名为“cboxElement”的类。在live（）绑定颜色框之前，将此类（cboxElement）添加到与选择器匹配的所有元素（在我的示例中为.colorbox），然后绑定到这个新类。

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

我尝试在ajax内容中调用$ .fn.colorbox.init（）以使colorbox重新添加.cboxElement类到元素，但这没有任何效果。（在处理shadowbox时我做了类似的事情，但对于colorbox似乎没有相同的效果。）

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

我找到了几个相关的帖子，但没有一个解决了这个问题，因为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()绑定来“回避”某些问题它会对colorbox进行“直接调用”，而不是依赖于colorbox的默认live()绑定。我会像我的情况一样调整它：

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

Answer 1

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

在页面加载时，DOM已准备就绪，并为选择器启动了colorbox AJAX使用颜色框选择器列表中的一些DOM元素调用页面的新部分，但是没有注意到，因为它在javascript读取选择器后加载到页面中。

请尝试以下操作 - 因为它会监视所有，现有和新body #main的{{1}}：

a[rel='lightbox']

编辑“.on（）”

$("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'方法也可以用作'bind'，所以这很酷。

Answer 2

我以一种非常简单的方式解决了这个问题。

如果您要发回ajax响应（通常是javascript响应） - 在该响应中附加正常的颜色框绑定代码（就像在任何地方一样）。

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

将此附加到服务器的js响应中。这对我有用。

Answer 3

问题似乎与我最初没有注意到的事情有关，因此没有提出我的问题。我编辑了这个问题以反映这些新信息。

我的问题是AJAX响应是多重绑定的，并且多次包含colorbox脚本。我用来包含脚本的Yii Framework帮助程序小部件在响应EACH TIME中也包括jQuery和Colorbox。 Yii没有办法确定所需的脚本（如jQuery）是否已经包含在主页面中（典型的无状态HTTP问题），因此每次都将它包含在AJAX部分渲染中。

我通过不使用Yii Widget在每个Ajax调用的renderPartial视图上执行Colorbox绑定来解决了这个问题。我只是在父页面上包含了colorbox绑定，因此Ajax内容中没有JS。

在jQuery ajax调用之后，colorbox（使用live）不重新绑定

3 个答案: