kann nicht mehrmals Dialog jQuery UI öffnen - Testfall

Question

enthalten habe ich vorbereitet a simple test case mein Problem demonstriert -

Ich benutze eine jQuery UI, um einen jQuery UI-Dialog zu öffnen:

jedoch das funktioniert nur einmal. Bei nachfolgenden Tastenklicks erhalte ich die Fehlermeldung:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Auch wenn ich vor dem Button in meinem Code, um den Dialog zu tun initialisieren -

HTML-Code:

<BUTTON ID="newBtn">New game</BUTTON> 

<DIV ID="newDlg" TITLE="New game"> 
    Select game board: 
    <BUTTON value="1">Winter</BUTTON> 
    <BUTTON value="2" DISABLED>Spring</BUTTON> 
    <BUTTON value="3" DISABLED>Summer</BUTTON> 
    <BUTTON value="4" DISABLED>Autumn</BUTTON> 
</DIV> 

JavaScript:

var newDlg = $('#newDlg').dialog({ 
     modal: true, 
     autoOpen: false, 
     close: function(e, ui) { 
       var bid = parseInt($(this).data('bid')); 
       $(this).removeData(); 
       if (1 <= bid && bid <= 4) { 
         alert('selected board id: ' + bid); 
       } 
     }, 
     buttons: { 
       'Close': function() { 
         $(this).dialog('close'); 
       } 
     } 
}); 

$('#newDlg button').button().click(function(e) { 
     e.preventDefault(); 
     var bid = this.value; 
     newDlg.data('bid', bid); 
     newDlg.dialog('close'); 
}); 

var newBtn = $('#newBtn').button().click(function(e) { 
     e.preventDefault(); 
     newDlg.dialog('open'); // also tried $('#newDlg') here! 
}); 

Ich habe versucht mit jQuery UI 1.11.4 und 1.12.1, aber das Problem besteht weiterhin.

Answer 1

Lustige Geschichte, die Frage ist:

$(this).removeData(); 

Dies ist die Beseitigung aller data Attribute, einschließlich derjenigen, verwendet, um den Dialog zu definieren. Dies kann durch Definieren der spezifischen Daten behoben werden, die Sie entfernen möchten:

$(this).removeData('bid'); 

Dann funktioniert es wie erwartet.

gegabelte Arbeitsbeispiel: https://jsfiddle.net/Twisty/dz8krbye/