我已经连续三天在寻找答案。问题是我有一个页面,该页面上的链接应使用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>
如果单击链接,它将加载一个Colorbox窗口,但是如果单击该链接,它将在此窗口中打开另一个Colorbox窗口。我希望将内容加载到当前内容中。将不胜感激。谢谢!
主窗口中的PS链接:
<a title="Client Details" rel="open_ajax" href="http://localhost/client/details/123">Client Details...</a>
而且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>
如果您需要将内容加载到同一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); } }); });