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的（简单）内容已经在colorbox中加载：

1.html:

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

我想通过点击链接来更改内容，但这并没有起作用。要么我得到一个额外的colorbox，要么什么也不会发生。

谢谢！

- saromba

---

你的意思是当Colorbox打开（显示来自1.html的内容）时，它有一个指向2.html的链接？所以基本上你想要在Colorbox内部有一个链接来改变Colorbox的内容.. 是这样吗？ - uɥƃnɐʌuop

1.html的内容已经在colorbox中加载。链接“更改内容”已经存在。我点击了这个链接...现在我希望2.html的内容能够在现有的colorbox中加载。 - saromba

Answer 1

您可以使用jQuery的live（）函数来监视现有和未来的colorbox链接的点击。此外，我建议您不要使用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属性。例如：

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

适用于jQuery 1.7+

对于jQuery 1.7，由于live()已被弃用，您需要按照以下方式操作：

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

- uɥƃnɐʌuop

---

嗨，这个不起作用。现在2.html的内容在第二个colorbox中（在第一个colorbox后面）。 - saromba

是的，我会更新完整的代码。它不会打开一个新的colorbox，而是将内容加载到其中，然后调整现有的colorbox大小。 - uɥƃnɐʌuop

非常抱歉，这不是我可以在快速评论中回答的问题，也与此答案不符。而且我得走了。但这是一个非常好的问题。你应该开始一个新的问题，如果没有人在我之前回答它，那么我会认真考虑一下。顺便说一句，你编辑了你的评论并删除了你的问题，但实际上，你应该问问它。我相信它将成为很好的搜索引擎内容。 - uɥƃnɐʌuop

嗨，这是跟进内容：https://dev59.com/N1zUa4cB1Zd3GeqPzxuj - saromba