Связывание элементов при загрузке модального окна из AJAX (jQuery)

Question

Я бы хотел создать список drag'n'drop внутри модального окна. Содержимое окна загружается с помощью вызова AJAX, поэтому я считаю, что мне нужно использовать метод .live () jQuery.

Вот мой текущий код:

$('#cboxLoadedContent').live('load', function() {
    // Event for sortable page lists
    $('ul#pageList').sortable();
});

Как настроить привязки при загрузке модального окна? Модальное окно происходит из плагина colorbox.

Примечание: я предполагаю, что 'load' не подходит для использования, потому что если я добавлю туда простой alert(), он даже не появится, когда загрузится окно.

Answer 1

В вашем случае просто позвоните .sortable() на элементы, когда вы загружаете их через ajax, например:

$.ajax({
   url: 'page.html',
   //stuff...
   success: function(data) {
     //Put stuff in DOM
     $('ul#pageList').sortable();
   }
});

Для , почему part: .live() не работает таким образом, он не ждет новых элементов и ничего не делает ... он прослушивает события от элементов, которые затем всплывают в DOM выполняет обработчики событий, если у него есть селектор, который соответствует.

Answer 2

Зависит от того, какое модальное окно вы используете.

Если вы используете диалоговое окно jQuery UI , вы можете использовать событие opendialog.

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

$( ".selector" ).bind( "dialogopen", function(event, ui) {
  ...
});

Если вы не используете пользовательский интерфейс jQuery, вам нужно перейти к коду и посмотреть, не происходит ли какое-либо событие при открытии всплывающего окна.