javascript – colorbox(使用live)在jQuery ajax调用之后不重新绑定

我有一个通过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的工作方式,“BoxElement”是一个名为“cBoxElement”的类.在live()绑定颜色框之前,将此类(cBoxElement)添加到与选择器匹配的所有元素(在我的示例中为.colorBox),然后绑定到这个新类.

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

我尝试在ajax内容中调用$.fn.colorBox.init()来获取colorBox以将.cBoxElement类重新添加到元素中,但这没有任何效果. (在处理shadowBox时我做了类似的事情,但对于colorBox似乎没有相同的效果.)

然后我尝试将所有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调用时都包含一个重复的颜色框脚本,这导致了问题.所以要小心！

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

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

解决方法:

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

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

尝试以下方法 – 因为它为所有,现有和新的[rel =’lightBox’]观看body #main：

$("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’,所以这很酷.

javascript – colorbox(使用live)在jQuery ajax调用之后不重新绑定

相关推荐