如何将 AJAX 内容加载到当前的 Colorbox 窗口中？

Question

我已经连续三天寻找答案了。问题是我有一个页面，其上的链接应该加载带有 AJAX 内容的 Colorbox，而这些内容又包含应该在同一个 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>

而且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>

Answer 1

如果您需要将内容加载到同一个 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);
        }
    });

});