jQuery自动完成只在对话框中工作一次答案

【问题标题】：jQuery autocomplete only working once in dialogjQuery自动完成只在对话框中工作一次
【发布时间】：2010-06-26 18:24:47
【问题描述】：

我有这个测试代码，除了在对话框第二次打开时自动完成停止工作之外，它运行良好。我需要使用 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 没有任何变化。

【问题讨论】：

标签： jquery jquery-ui autocomplete dialog

【解决方案1】：

如果您的 $container 内容是静态的，为什么不只添加一次。我确信您的问题与您每次打开对话框时都添加 $container 元素有关。

试试

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

【讨论】：

【解决方案2】：

这和jQuery UI状态管理有关，因为这种状态管理，你不能在一个元素上多次实例化同一个插件，除非你先销毁插件实例。

无论如何你可以在对话框初始化中调用 html() 并且它会起作用：

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

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

【讨论】：

【解决方案3】：

这对我有用。基本上清除对话框并在关闭时将其销毁。

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

【讨论】：