jQuery更改颜色框的内容 [英] jQuery change content of colorbox

问题描述

我已经尝试过使用类似标题的问题，但是它们不起作用. (例如:如何将AJAX内容加载到当前Colorbox窗口中? )

I tried already questions with simliar titles, but they don't work. (For example: How to load AJAX content into current Colorbox window?)

我有主页:(包括jQuery 1.6.1)

I have the main page: (including 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的(简单)内容加载到了颜色框中:

This works fine, the (simple) content of 1.html is loaded in the colorbox:

1.html:

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

现在，我想通过单击链接来更改内容.这是行不通的. 以太我有一个额外的颜色框，否则什么也没有发生.

Now I want to change the content by klicking on the link. This doesn't work. Ether I get an additional colorbox, or nothing happens.

感谢！

推荐答案

您可以使用jquery live()函数来监视对现有和将来的colorbox链接的点击.另外，我建议您不要使用rel作为选择器.该属性旨在用于SEO.因此，在此示例中，我将选择器从rel属性移到了class属性:

You could use a jquery live() function to watch for clicks on existing and future colorbox links. Also, I recommend that you don't use rel as your selector. That attribute is intended for use in SEO. So in this example I've moved your selector from the rel attribute to the class attribute:

$(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.例如:

Then just make sure that anything that you want to trigger the new colorbox content has the "open_ajax" class and an href. E.G.:

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

针对jQuery 1.7+的更新

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

For jQuery 1.7, since live() has been deprecated, you'll need to do it this way:

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

这篇关于jQuery更改颜色框的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！