javascript 通过ajax返回的颜色框和内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4801058/
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 and Content returned via ajax
提问by BugBusterX
I'm using jquery colorbox to popup user accounts in a window. I also have a button that loads more users into the page via ajax, but for some reason users loaded with ajax do not popup in colorbox window. How can I get colorbox to work with the content that was returned via ajax?
我正在使用 jquery colorbox 在窗口中弹出用户帐户。我还有一个按钮，可以通过 ajax 将更多用户加载到页面中，但由于某种原因，加载了 ajax 的用户不会在 colorbox 窗口中弹出。如何让 colorbox 处理通过 ajax 返回的内容？
function loadMore(pageNo) {
//$("#loading").html('Loading...').show();
var url = '/search/resultsAjax';
$.get(url, {page: pageNo}, function(response) {
$("#results").append(response);
//$("#loading").hide();
});
}
$(document).ready(function() {
var currPage = 1;
$("a.next").click(function() {
loadMore(++currPage);
});
$("a.usr").colorbox({width:"960px", height:"90%", iframe:true});
});
回答by Woahdae
If you want to make it work globally, regardless of how the content is loaded:
如果你想让它全局工作，不管内容是如何加载的：
$('body').on('click', 'a.usr', function() {
$(this).colorbox({width:"960px", height:"90%", iframe:true});
});
回答by mu is too short
When you bind colorbox in $(document).ready()with this:
当您$(document).ready()使用此绑定颜色框时：
$("a.usr").colorbox({width:"960px", height:"90%", iframe:true});
jQuery will go search through the page, grab everything that matches a.usr, bind colorbox to those items, and then forget all about a.usr. jQuery won't remember that you're interested in a.usrso the new ones won't be colorbox'd.
jQuery 将搜索页面，抓取所有匹配的a.usr，将 colorbox 绑定到这些项目，然后忘记所有关于a.usr. jQuery 不会记住您感兴趣，a.usr因此不会对新的感兴趣。
The usual solution to this sort of thing is to use .live()or .delegate()but those won't work here as there isn't a "colorbox" event.
这种事情的通常解决方案是使用.live()or.delegate()但那些在这里不起作用，因为没有“colorbox”事件。
However, you can bind colorbox by hand easily enough. Try change loadMoreto something more like this:
但是，您可以轻松地手动绑定 colorbox。尝试更改loadMore为更像这样的内容：
function loadMore(pageNo) {
$.get('/search/resultsAjax', { page: pageNo }, function(response) {
var $html = $(response);
$html.find('a.usr').colorbox({ width: '960px', height: '90%', iframe: true });
$('#results').append($html);
};
}
You just turn the responseHTML into a jQuery object, find all the a.usrthings inside it, bind colorbox to those, and then insert the new HTML into the DOM as usual.
您只需将responseHTML 转换为 jQuery 对象，找到其中的所有a.usr内容，将 colorbox 绑定到这些内容，然后像往常一样将新的 HTML 插入到 DOM 中。
回答by Shankan
Use this:
用这个：
<a onclick='parent.$.colorbox({href:"schedule_delete.php?sid=<?php echo $schedule_row->schedule_id; ?>"}); return false;'>delete</a
