colorbox（使用实时使用）在jQuery ajax呼叫后不重新启动

Question

我有通过Ajax加载的元素列表（使用JQuery's .load（））。这些元素中的每个元素都有一个（编辑）链接旁边的Lightboxes（使用Colorbox）一个小编辑表单。关闭Lightbox时，我使用闭合的回调重新加载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>

我看着 配色箱源代码 看到那是用途 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;
  }
});

您可以在上面看到Colorbox的工作方式是通过绑定到“ BoxElement”的方式，该类是它创建的类似于“ CboxElement”的类。在live（）绑定colorbox之前，将此类（cboxelement）添加到匹配选择器（我示例中的.Colorbox）的所有元素，然后绑定到此新类。

因此，认为如果我将Colorbox绑定在Ajaxed内容的外面，它将在我用Ajax替换#FeatuRelist Div之后绑定到链接，因为Live（）应该绑定到“现在或将来”的元素。但这不是因为它绑定到.cboxElement而不是.colorbox，因此当Ajax Reloads colorbox不会重新添加.cboxElement类时。

我尝试在Ajax内容中调用$ .FN.ColorBox.Init（），以使ColorBox重新添加.CboxElement类重新添加到元素上，但这没有效果。 （我在处理ShadowBox时会这样做，但对于Colorbox似乎不起作用。）

因此，我尝试将所有Colorbox代码放在Ajax内容中。当我这样做时，颜色框的绑定是堆叠/链接。因此，我第二次称呼它是两个配色箱（必须点击“关闭”按钮两次才能返回主屏幕）。我第三次得到三次。这是因为当我再次调用colorbox时，它添加了.cboxelement类，使旧的live（）再次绑定为Active，并且还添加了另一个Live（）绑定到它。我试图通过首先调用.die（）来清除.live（）绑定，但由于某种原因不起作用。

我找到了几个相关的帖子，但是由于Colorbox已经使用了Live（）：
jQuery colorbox的问题
jQuery ajax表到页面，但现在Colorbox叠加不再工作

还有其他想法吗？我真的很困难。我觉得我应该切换到另一个Lightbox，但是总的来说，我喜欢Colorbox，并且在网站上其他任何地方都可以正常运行，直到出现这个Ajax问题为止。

谢谢！！！

编辑：

所以，在 这个案例 我的问题是我的框架（yii）包括重复 colorbox 每个Ajax呼叫上的脚本，这引起了问题。因此，请注意！

对于每个没有面对重复的录音问题的问题的人，我是： @RELIC在下面指出您可以通过自己的自己的某些问题来“振动”一些问题 jQuery委托（） 绑定颜色框的“直接调用”，而不是依靠colorbox的默认值 live() 捆绑。我会这样对我的情况进行调整：

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

Answer 1

这个问题似乎与我一开始没有注意到的东西有关，因此没有提出问题。我已经编辑了这个问题，以反映这些新信息。

我的问题是，Ajax响应是多束缚的，并且多次包含Colorbox脚本。我用来包括脚本的YII框架助手小部件每次都在响应中包括jQuery和colorbox。 YII无法确定主页（典型的无状态HTTP问题）是否已经包含所需的脚本（例如jQuery），因此每次都将其包含在Ajax部分渲染中。

我通过不使用yii小部件在每个Ajax调用上进行boderbind绑定来解决此问题 renderPartial 看法。我只是在绑定的 父母 页面，因此Ajax内容中没有JS。

Answer 2

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

在页面加载最初，DOM已准备就绪，并且为选择器Ajax启动ColorBox，调用页面的新部分，其中有一些DOM元素在Colorbox Selector列表中，但没有注意到，因为它在选择器之后加载到页面上由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”，所以这很酷。

Answer 3

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

如果您要发送回答AJAX响应（通常是JavaScript响应），请在该响应中附加正常的Colorbox绑定代码（如在任何位置所做的）。

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

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