La saisie semi-automatique jQuery ne fonctionne qu'une seule fois dans le dialogue

Question

J'ai ce code de test qui fonctionne parfaitement, sauf que la saisie semi-automatique cesse de fonctionner la deuxième fois que la boîte de dialogue est ouverte. J'ai besoin d'ouvrir le dialogue de cette façon en utilisant html parce que je veux qu'il s'ouvre très vite, et c'était le meilleur moyen. Pourquoi la saisie semi-automatique cesse-t-elle de fonctionner la deuxième fois?

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: La raison pour laquelle j'utiliser le HTML comme ceci est parce que je veux ouvrir une boîte de dialogue vide pour l'accélérer. En agissant de la sorte, le dialogue semble beaucoup plus réactif. Je veux continuer à ouvrir le dialogue de cette façon. Le mystère demeure, pourquoi les gestionnaires d'événements et la saisie semi-automatique cessent-ils de fonctionner la deuxième fois que j'ouvre le dialogue de cette façon? Rien n'a de changement dans $ container ou $ input.

Answer 1

Si le contenu de votre conteneur $ est statique, ne l'ajoutez pas une seule fois. Je suis sûr que votre problème est lié au fait que vous ajoutez les éléments $ container chaque fois que vous ouvrez la boîte de dialogue.

essayer

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

qui est lié avec jQuery UI gestion de l'Etat, en raison de cette gestion de l'Etat, vous ne pouvez pas instancier le même plug-in sur un élément plusieurs fois, à moins que vous détruisez l'instance plug-in d'abord.

Plus d'infos ici: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Quoi qu'il en soit vous pouvez appeler html() dans le dialogue et initialisation, il fonctionnera:

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

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

Answer 3

Cela a fait l'affaire pour moi. Fondamentalement effacer le dialogue et le détruire à proximité.

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