javascript - jQuery UI ダイアログを複数回開くことができない - テストケースが含まれています

Question

私の問題を示す簡単なテストケースを用意しました-

jQuery UI ボタン​​を使用して jQuery UI ダイアログを開きます。

ただし、これは一度しか機能しません。後続のボタンをクリックすると、エラーが発生します。

不明なエラー: 初期化の前にダイアログでメソッドを呼び出すことはできません。メソッド「open」を呼び出そうとしました

コードのボタンの前にダイアログを初期化しますが、

HTML コード:

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

jQuery UI 1.11.4 および 1.12.1 を使用してみましたが、問題は解決しません。