jQuery 改变 colorbox 的内容

Question

我已经尝试过类似标题的问题，但它们不起作用。 （例如：如何将 AJAX 内容加载到当前 Colorbox 窗口中？ ）

我有主页：（包括 jQuery 1.6.1）

<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<script>
jQuery(function(){
    $("#aLink").colorbox();
    $('#blub a[rel="open_ajax"]').live('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href'); 
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            cache: false,
            beforeSend: function() {
                //$('#cboxContent').empty();
                $('#cboxLoadedContent').empty();
                $('#cboxLoadingGraphic').show();
            },
            complete: function() {
                $('#cboxLoadingGraphic').hide();
            },
            success: function(data) {
                $('#cboxLoadedContent').append(data);

            }
        });
    });
    });
</script>
<a href="1.html" id="aLink">colorbox open</a>

这工作正常，1.html 的（简单）内容加载到颜色框中：

1.html：

<div id="blub">
    <a rel="open_ajax" href="2.html">Change Content</a>
</div>

现在我想更改内容通过点击链接。这是行不通的。 以太我得到一个额外的彩盒，或者什么也没有发生。

谢谢！

Answer 1

您可以使用 jquery live() 函数来监视对现有和未来颜色框链接的点击。另外，我建议您不要使用 rel 作为选择器。该属性旨在用于 SEO。因此，在本示例中，我已将选择器从 rel 属性移至 class 属性：

$(document).ready(function() {
    $('a.open_ajax').live('click', function(){
        $.colorbox({
            open:true,
            href: this.href
            //plus any other interesting options    
        });

        return false;
    });
});

然后只需确保您想要触发新的 colorbox 内容的任何内容都具有“open_ajax”类和 href。 EG：

Open

jQuery 1.7+ 更新

对于 jQuery 1.7，自 live( ) 已被弃用，您需要这样做：

$(document).on("click", "a.open_ajax", function() {
    //everything that was in the live() callback above
});