javascript jQuery ajax 调用后不重新绑定颜色框（使用实时）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3542549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
colorbox (which uses live) not rebinding after jQuery ajax call
提问by thaddeusmt
I have a list of elements that I am loading via ajax (using jQuery's .load()). Each of these elements has an (edit) link next to it that lightboxes (using colorbox) a little edit form. When the lightbox is closed I use the onClosed callback to reload the ajax list to show and changes made during the edit.
我有一个通过 ajax 加载的元素列表（使用 jQuery 的 .load()）。这些元素中的每一个都有一个（编辑）链接，它旁边有一个灯箱（使用颜色框）一个小的编辑表单。当灯箱关闭时，我使用 onClosed 回调重新加载 ajax 列表以显示和编辑期间所做的更改。
The colorbox call looks likes this:
colorbox 调用如下所示：
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
My list looks like this:
我的清单是这样的：
<div id="featureList">
<ul id="features">
<li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=0">Edit</a>)</li>
<li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=1">Edit</a>)</li>
</ul>
</div>
I looked at the colorbox source codeand saw that is uses jquery live()to do the bind. Here it is:
我查看了colorbox 源代码，看到它用于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;
}
});
You can see above the way colorbox works is by binding to "boxElement", which is a class it creates called "cboxElement". Before the live() bind colorbox adds this class (cboxElement) to all of the elements matching the selector (.colorbox in my example), then binds to this new class.
您可以在上面看到 colorbox 的工作方式是绑定到“boxElement”，这是它创建的一个名为“cboxElement”的类。在 live() 绑定之前，colorbox 将此类 (cboxElement) 添加到与选择器匹配的所有元素（在我的示例中为 .colorbox），然后绑定到这个新类。
So thought that if I placed the colorbox bind outside of the ajaxed content it would bind to the links after I replaced the #featureList div with ajax, since live() is supposed to bind to elements "now or in the future". But it doesn't because it's binding to .cboxElement instead of .colorbox so when the ajax reloads colorbox doesn't re-add the .cboxElement class to the elements.
所以认为如果我将颜色框绑定放在 ajaxed 内容之外，它会在我用 ajax 替换 #featureList div 后绑定到链接，因为 live() 应该绑定到“现在或将来”的元素。但这不是因为它绑定到 .cboxElement 而不是 .colorbox 所以当 ajax 重新加载 colorbox 时，不会将 .cboxElement 类重新添加到元素中。
I tried calling $.fn.colorbox.init() in the ajax content to get colorbox to re-add the .cboxElement class to the elements, but this had no effect. (I do something like this when dealing with shadowbox, but it doesn't seem to work the same for colorbox.)
我尝试在 ajax 内容中调用 $.fn.colorbox.init() 来让 colorbox 将 .cboxElement 类重新添加到元素中，但这没有效果。（我在处理 shadowbox 时做了类似的事情，但它似乎对 colorbox 不起作用。）
So then I tried to place all the colorbox code inside the ajax content. When I do this the colorbox binds are stacking/chaining. So the second time I call it I get two colorboxes (and have to hit the "close" button twice to return to the main screen). The third time I get three. This is because when I call colorbox again it adds the .cboxElement class, making the old live() binds active again, and it also adds ANOTHER live() bind to it. I tried to clear out the .live() binds by calling .die() first, but it didn't work for some reason.
然后我尝试将所有颜色框代码放在 ajax 内容中。当我这样做时，颜色框绑定正在堆叠/链接。所以我第二次调用它时，我得到了两个颜色框（并且必须按两次“关闭”按钮才能返回主屏幕）。第三次我得到三个。这是因为当我再次调用 colorbox 时，它添加了 .cboxElement 类，使旧的 live() 绑定再次处于活动状态，并且它还添加了另一个 live() 绑定到它。我试图通过首先调用 .die() 清除 .live() 绑定，但由于某种原因它不起作用。
I have found a couple of related posts but none of them solved this problem since colorbox is already using live():
Problem with jQuery Colorbox
jQuery AJAX table to a page but now the colorbox overlays no longer work
我找到了几个相关的帖子，但没有一个解决这个问题，因为 colorbox 已经在使用 live():
Problem with jQuery Colorbox
jQuery AJAX table to a page 但现在 colorbox 覆盖不再工作
Any other ideas out there? I am really stumped. I feel like I should switch to a different lightbox, but in general I like colorbox and it was working great everywhere else on the site until this ajax problem came up.
还有其他想法吗？我真的很难过。我觉得我应该切换到不同的灯箱，但总的来说，我喜欢 colorbox，它在网站上的其他任何地方都运行良好，直到出现这个 ajax 问题。
Thanks!!!
谢谢！！！
EDIT:
编辑：
So, in this casemy issue was that my framework (Yii) was including a duplicate colorboxscript on each AJAX call, which was causing the problem. So watch out for that!
因此，在这种情况下，我的问题是我的框架 ( Yii)colorbox在每个 AJAX 调用中都包含一个重复的脚本，这导致了问题。所以要注意这一点！
For everyone having issues who is NOT facing the duplicate-script issue I was:@Relic points out below you can sort of "sidestep" some issues by doing your own jQuery delegate()bind which does a "direct call" of colorbox, instead of relying on colorbox's default live()binding. I would tweak it like this for my case:
对于没有遇到重复脚本问题的每个人，我是：@Relic 在下面指出，您可以通过执行自己的jQuery delegate()绑定来“回避”一些问题，该绑定对颜色框进行“直接调用”，而不是依赖于 colorbox 的默认live()绑定。对于我的情况，我会像这样调整它：
$(document).delegate("#features a", "click", function (event) { // $.colorbox() call }
采纳答案by thaddeusmt
The problem appears to be related to something I didn't notice at first and therefore didn't put in my question. I have edited the question to reflect this new information.
这个问题似乎与我一开始没有注意到的事情有关，因此没有提出我的问题。我已经编辑了问题以反映这些新信息。
My issue was that AJAX response was multiple-binding and including the colorbox script multiple times. The Yii Framework helper widget I was using to include the script is also including jQuery and Colorbox in the response EACH TIME. Yii doesn't have a way to determine if the required scripts (like jQuery) have already been included in the main page (typical stateless HTTP issue) so it includes it in the AJAX partial render each time.
我的问题是 AJAX 响应是多重绑定的，并且多次包含 colorbox 脚本。我用来包含脚本的 Yii 框架助手小部件也在每次响应中包含 jQuery 和 Colorbox。Yii 无法确定所需的脚本（如 jQuery）是否已经包含在主页中（典型的无状态 HTTP 问题），因此每次都将其包含在 AJAX 部分渲染中。
I solved this issue by not using a Yii Widget to do the Colorbox binding on each Ajax call's renderPartialview. I just include thecolorbox binding on the parentpage, so the Ajax content has no JS in it.
我通过不使用 Yii Widget 在每个 Ajax 调用的renderPartial视图上进行 Colorbox 绑定来解决这个问题。我只是在父页面上包含了colorbox 绑定，所以Ajax 内容中没有JS。
回答by Eric Hodonsky
First of all, you shouldn't use .live()it's deprecated. Instead learn how to use .delegate()You'll find this is a much more powerful listener and will help solve your problem.
首先，你不应该使用.live()它已被弃用。而是学习如何使用.delegate()您会发现这是一个更强大的侦听器，它将帮助您解决问题。
On page load initially the DOM is ready, and colorbox is initilized for the selector AJAX calls a new piece of the page with some DOM element that is in the colorbox selector list, but isn't noticed because it loaded into the page after the selector was read by the javascript.
在页面加载时，最初 DOM 已准备就绪，并且颜色框已为选择器初始化 AJAX 使用颜色框选择器列表中的一些 DOM 元素调用页面的新部分，但未被注意到，因为它在选择器之后加载到页面中被javascript读取。
Try the following - as it watches body #mainfor all, existing and new a[rel='lightbox']:
尝试以下操作 - 因为它会监视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});});
EDIT for ".on()"
编辑“.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
});
});
Yes, big change, I know, but the point is the 'on' method can also be used as 'bind', so that's kind of cool.
是的，我知道变化很大，但重点是 'on' 方法也可以用作 'bind'，所以这很酷。
回答by Anand
i solved this in a pretty easy way.
我以一种非常简单的方式解决了这个问题。
If you are sending back an ajax response (usually a javascript response) - attach the normal colorbox binding code (as you would do in any place) in that response.
如果您要发回 ajax 响应（通常是 javascript 响应） - 在该响应中附加正常的 colorbox 绑定代码（就像您在任何地方所做的那样）。
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
attach this in your js response from server. this worked for me.
将此附加到来自服务器的 js 响应中。这对我有用。
