jQuery更改了colorbox的内容

Question

我已尝试过simliar标题的问题,但它们不起作用.(例如:如何将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;
    });
});

然后确保您想要触发新颜色框内容的任何内容都具有"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
});