jQuery自动完成仅在对话框中工作一次

时间:2010-06-26 18:24:48

标签: jquery jquery-ui autocomplete dialog

我有一个完美的测试代码,除了自动完成在第二次打开对话框时停止工作。我需要使用html以这种方式打开对话框,因为我希望它能够快速打开,这是最好的方法。为什么autocomplete第二次停止工作?

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中没有任何变化。

3 个答案:

答案 0 :(得分:0)

如果您的$ 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');
});

答案 1 :(得分:0)

这与jQuery UI状态管理有关,因为这种状态管理,你不能多次在元素上实例化相同的插件,除非你先破坏插件实例。

此处有更多信息:http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

无论如何,您可以在对话框init中调用html(),它将起作用:

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

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

答案 2 :(得分:0)

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

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