jQuery更改颜色框的内容

Question

我已经尝试了类似标题的问题，但它们不起作用。 （例如：How to load AJAX content into current Colorbox window?）

我有主页：（包括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;
    });
});

然后只需确保您想要触发新颜色框内容的任何内容都具有“open_ajax”类和一个 href。例如：

<a class="open_ajax" href="colorboxPage.html">Open</a>

jQuery 1.7+ 更新

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

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