Инициировать JQuery UI Dialog из результата вызова AJAX

Question

У меня есть страница A, которая вызывает страницу B, используя AJAX. Страница B будет помещена в контейнер div на странице A. Внутри результата (то есть страницы B) есть код, который будет инициировать диалоговое окно jQuery UI. Div для диалога также находится на странице B. Однако, это не работает. Я должен был бы поместить код инициации на странице A. Итак, если я хочу поместить код инициации на странице B, что мне делать?

Код инициации:

<code>
$('#dialog').dialog({
    bgiframe: true,
    autoOpen: false,
    width: 300,
    height: 300,
    modal: true,
    resizable: false,        
    buttons: {
        'Create an account': function() { },
         Cancel: function() { }
    },
    close: function() { }
});

Я также пытался использовать $('div.dialog') в качестве селектора (изменил идентификатор на класс), и это работает, но каждый раз, когда я запрашиваю страницу B (без перезагрузки страницы A), диалог будет увеличиваться. Например, когда я впервые запросил страницу B, откроется одно диалоговое окно. Во второй раз, когда я запросил страницу B, откроются два диалоговых окна.

Answer 1

Ваш подход не за горами, вы просто дублируете диалог вызова при загрузке каждый раз, поэтому уничтожьте предыдущий , вместо этого:

$('div.dialog').dialog({ ...options... });

Позвоните по этому номеру:

$('div.dialog').dialog('destroy').dialog({ ...options... });

Это предотвращает создание нескольких диалогов для одного и того же элемента. Кроме того, вы можете проверить, было ли еще создано диалоговое окно для этого элемента, например:

$('div.dialog').filter(function() {
  return $(this).closest('.ui-dialog').length === 0;
}).dialog({ ...options... });

Это создает диалог только для <div class="dialog"> элементов, которые еще не перенесены в диалог.

Answer 2

Это можно сделать с помощью функции jQuery live с пользовательской привязкой событий. Каждый раз, когда вы обращаетесь к странице B, вам нужно будет запускать свое пользовательское событие, чтобы новый элемент диалога можно было связать в обработчике событий. Если вы используете этот метод, код инициации должен быть все еще на странице А.