JQuery изменить содержание Colorbox - PullRequest
Новая
       11

JQuery изменить содержание Colorbox

6 голосов
/ 10 октября 2011

Я уже пробовал вопросы с одинаковыми названиями, но они не работают.(Например: Как загрузить содержимое 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>

Thisработает нормально, в colorbox загружается (простое) содержимое 1.html:

1.html: 

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

Теперь я хочу изменить содержимое, щелкнув по ссылке.Это не работаетЭфир, я получаю дополнительную коробку, или ничего не происходит.

Спасибо!

1 Ответ

5 голосов
/ 11 октября 2011

Вы можете использовать функцию 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. E.G.:

<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
});
...