jQuery 如何将 AJAX 内容加载到当前的 Colorbox 窗口中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5273311/
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
How to load AJAX content into current Colorbox window?
提问by Yaronius
I'm searching for the answer for three days in a row already. The matter is that I have a page, links on which should load Colorbox with AJAX content that in its turn contains links that should be loaded in the same Colorbox modal window. So far I managed to make it work (partially) by this:
我已经连续三天寻找答案了。问题是我有一个页面，链接应该加载带有 AJAX 内容的 Colorbox，而 AJAX 内容又包含应该在同一个 Colorbox 模式窗口中加载的链接。到目前为止，我设法通过以下方式使其（部分）工作：
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='open_ajax']").live('click', function() {
$.colorbox({
href:$(this).attr('href')
});
return false;
});
});
</script>
It loads a Colorbox window, if I click on a link, but in this window, if I click on its links, it opens another Colorbox window. And I want the content to be loaded within the current one. Will appreciate any thoughts. Thanx!
如果我点击一个链接，它会加载一个 Colorbox 窗口，但在这个窗口中，如果我点击它的链接，它会打开另一个 Colorbox 窗口。我希望在当前内容中加载内容。将欣赏任何想法。谢谢！
P.S. Links in the main window:
PS 主窗口中的链接：
<a title="Client Details" rel="open_ajax" href="http://localhost/client/details/123">Client Details...</a>
And links in the Colorbox are all the same (it is simply pagination):
Colorbox 中的链接都是一样的（只是分页）：
<a rel="open_ajax" href="http://localhost/client/details/123/1">1</a>
<a rel="open_ajax" href="http://localhost/client/details/123/2">2</a>
<a rel="open_ajax" href="http://localhost/client/details/123/3">3</a>
<a rel="open_ajax" href="http://localhost/client/details/123/4">4</a>
<a rel="open_ajax" href="http://localhost/client/details/123/5">5</a>
回答by RyanP13
If you need to load the content into the same Colorbox rather than opening a new instance, I would start by making sure that the event handler context to open the Colorbox was exclusive and not hooked onto the 'open_ajax' elements in the Colorbox.
如果您需要将内容加载到同一个 Colorbox 而不是打开一个新实例，我将首先确保打开 Colorbox 的事件处理程序上下文是独占的，而不是挂钩到 Colorbox 中的“open_ajax”元素。
Something like this:
像这样的东西：
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='open_ajax']:not(#colorbox a[rel='open_ajax'])").live('click', function() {
$.colorbox({
href:$(this).attr('href')
});
return false;
});
});
</script>
If the above does not work try making the selector more specific/unique.
如果上述方法不起作用，请尝试使选择器更加具体/独特。
Then AJAX in the new content directly into the Colorbox you already have open.
然后AJAX 中的新内容直接插入到你已经打开的Colorbox 中。
Something like this:
像这样的东西：
$('#cboxLoadedContent a[rel="open_ajax"]').live('click', function(e){
// prevent default behaviour
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
cache: true,
beforeSend: function() {
$('#cboxLoadedContent').empty();
$('#cboxLoadingGraphic').show();
},
complete: function() {
$('#cboxLoadingGraphic').hide();
},
success: function(data) {
$('#cboxLoadedContent').append(data);
}
});
});
