Автозаполнение jQuery работает только один раз в диалоге

Question

У меня есть этот тестовый код, который отлично работает, за исключением того, что автозаполнение перестает работать при втором открытии диалогового окна. Мне нужно открыть диалог таким образом, используя HTML, потому что я хочу, чтобы он открывался очень быстро, и это был лучший способ. Почему автозаполнение перестает работать во второй раз?

var $container = $('#container'),
    $input = $container.find('input:eq(0)');

var source = new Array(2);

source[0] = { value: 1000, label: 'Description' };
source[1] = { value: 1001, label: 'Description' };

$input.autocomplete({ source: source });

var $dialog = $('<div></div>').dialog({
    autoOpen: false,
    modal: true,
    beforeclose: function() { $dialog.html(''); }
});

$('#open').click(function() {
    $dialog.dialog('open').html($container);
});

РЕДАКТИРОВАТЬ: причина, по которой я использую html, потому что я хочу открыть пустой диалог, чтобы ускорить его. Если вы сделаете это, диалог станет более отзывчивым. Я хочу продолжать открывать диалог таким образом. Остается загадкой, почему перестают работать обработчики событий и автозаполнение, когда я открываю диалог таким образом? Ничто не изменилось в $ container или $ input.

Answer 1

Это связано с управлением состоянием пользовательского интерфейса jQuery: из-за этого управления состоянием вы не можете создать один и тот же плагин для элемента несколько раз, если сначала не уничтожите экземпляр плагина.*http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

В любом случае вы можете вызвать html () в диалоге инициализации, и он будет работать:

var $dialog = $('<div></div>').dialog({
  autoOpen: false,
  modal: true
}).html($container);

$('#open').click(function() {
  $dialog.dialog('open');
});

Answer 2

Это помогло мне.В основном очистите диалог и уничтожьте его при закрытии.

                        $dailyregisterdialog.dialog({
                             resizable: false,
                             width: 800,
                             modal: true,
                             title: "Daily Class Register",
                             position: [150,90],
                             close: function(){
                                 $(this).html("").destroy();
                             }
                        });

Answer 3

Если содержимое вашего контейнера $ статическое, почему бы не добавить его только один раз.Я уверен, что ваша проблема связана с тем, что вы добавляете элементы $ container каждый раз, когда открываете диалоговое окно.

try

var $container = $('#container'),
    $input = $container.find('input:eq(0)');

var source = new Array(2);

source[0] = { value: 1000, label: 'Description' };
source[1] = { value: 1001, label: 'Description' };

$input.autocomplete({ source: source });

var $dialog = $('<div></div>').dialog({
    autoOpen: false,
    modal: true
}).html($container);

$('#open').click(function() {
    $dialog.dialog('open');
});