jQuery autocomplete only working once in dialog.

Question

I have this test code that works perfectly except the autocomplete stops working the second time the dialog is opened. I need to open the dialog this way using html because i want it to open really fast, and this was the best way. Why does autocomplete stop working the second time?

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

EDIT: The reason I use html like this is because i want to open an empty dialog to speed it up. Doing it like this makes the dialog seem alot more responsive. I want to continue opening the dialog this way. The mystery remains, why does event handlers and autocomplete stop working the second time i open the dialog this way? Nothing has changes in $container or $input.

Answer 1

If your $container content is static why not add it just the once. I am sure your issue is to do with the fact you add the $container elements every time you open the dialog.

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

Answer 2

That is related with jQuery UI state management, because of this state management, you cannot instantiate the same plugin on an element multiple times, unless you destroy the plugin instance first.

More info here: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Anyway you can call html() in dialog init and it will work:

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

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