Как загрузить новые страницы в мою текущую цветовую панель jQuery?

У меня возникли проблемы с загрузкой страниц в уже существующую цветовую панель.

У меня есть цветной ящик, открытый при нажатии на ссылку, связанную следующим кодом:

$("a.ajaxAddPage").colorbox({
    onComplete: function(){
        $('ul#addPage li a').click(function() {
            $.colorbox({href: $(this).attr('href')});

            return false;
        });
    }
});

Следующий HTML-код загружается в это цветовое поле через AJAX:

<div class='colorboxWindow'>
    <ul id='addPage'>
        <li><a href='addCat.php'>Add Category</a></li>
        <li><a href='addPage.php' class='current'>Add New Page</a></li>
        <li><a href='addPage2.php'>Add Another Page</a></li>
    </ul>

    <h3>Add New Page...</h3>
</div>

Я пытаюсь, чтобы каждая из этих трех ссылок открывалась в текущем цветовом поле при нажатии на них. С моей привязкой onComplete выше это работает для первого щелчка, но следующий щелчок просто открывается как обычная страница.

Если я добавлю еще один onComplete к вызову $.fn.colorbox() в приведенном выше коде, то 2-й щелчок также загрузится в том же цветовом поле, а 3-й - нет.

Есть ли способ просто привязать все будущие клики к открытию в одном и том же цветовом поле? Я еще мало знаю о привязке событий.

Если вам нужны разъяснения, пожалуйста, спросите.


javascript html jquery colorbox
person Graham Swan    schedule 15.03.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Как насчет использования метода jQuery .live()? Он должен обрабатывать добавляемые новые элементы и присоединять обработчик событий к новым элементам.

В данном случае мы применяем его к элементу #cboxLoadedContent, потому что именно там должны появиться новые элементы из вызовов AJAX. Это выглядит примерно так:

$("a.ajaxAddPage").colorbox();

$('#cboxLoadedContent a').live('click', function() {
  $.colorbox({href: $(this).attr('href')});
  return false;
});
person htanata    schedule 15.03.2010
comment
Это именно то, что мне нужно! Я помню, как читал о методе jQuery .live() несколько недель назад, но я никогда не использовал его, поэтому он вылетел из головы. Спасибо! - person Graham Swan; 15.03.2010
comment
Спасибо. Вам не хватает закрывающей скобки. Ваше здоровье! - person David; 02.11.2011
comment
(для сотрудников Google) обратите внимание, что начиная с jQuery 1.7 live() устарело, и вам следует использовать on() - person dev_row; 11.10.2013