我已经连续三天都在寻找答案了.问题是我有一个页面,链接上应该加载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>
如果我点击一个链接,它会加载一个ColorBox窗口,但是在这个窗口中,如果我点击它的链接,它会打开另一个ColorBox窗口.我希望将内容加载到当前内容中.会不会有任何想法.感谢名单！
附：主窗口中的链接：
<a title="Client Details" rel="open_ajax" href="http://localhost/client/details/123">Client Details...</a>
<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>
解决方法
如果您需要将内容加载到相同的ColorBox而不是打开一个新实例,我首先要确保打开ColorBox的事件处理程序上下文是独占的,而不是挂钩到ColorBox中的’open_ajax’元素.
像这样的东西：
<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>
如果上述方法不起作用,请尝试使选择器更具体/唯一.
然后AJAX中的新内容直接进入你已经打开过的ColorBox.
像这样的东西：
$('#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);
}
});
});
