は、複数回にjQueryのUIのダイアログを開くことができません -</p> <p>私はjQueryのUIのダイアログを開くには、jQueryのUIボタンを使用 - テストケースは、私は私の問題を実証<a href="https://jsfiddle.net/afarber/va693kvs/4/" rel="nofollow noreferrer">a simple test case</a>を用意しました

Question

が含まれていました。しかし

これは一度しか動作しません。

<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> 

： -

HTMLコードを

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

私は私のコードでボタンの前にダイアログを初期化しないにもかかわらず：私はエラーを取得し、その後、ボタンのクリックで

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

jQuery UI 1.11.4と1.12.1を使用しようとしましたが、問題は解決しません。

Answer 1

おかしい話、問題は次のとおりです。

$(this).removeData(); 

これは、ダイアログを定義するために使用されるものを含むすべてのdata属性を削除しています。これは、削除する特定のデータを定義することで修正できます。

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

次に、期待どおりに動作します。

フォーク加工例：https://jsfiddle.net/Twisty/dz8krbye/