Javascript 无法多次打开jQuery UI对话框-包含测试用例

我已经准备好演示我的问题-

我使用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>

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

新游戏
选择游戏板：
冬天
春天
夏天
秋

JavaScript:

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

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

var newDlg=$（'#newDlg'）。对话框({
莫代尔：是的，
自动打开：错误，
关闭：功能（e、ui）{
var bid=parseInt（$（this）.data（'bid'）；
$（this.removeData（）；
如果（1有趣的故事，问题是：

  $(this).removeData();

这将删除所有
数据
属性，包括用于定义对话框的属性。可以通过定义要删除的特定数据来解决此问题：

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

然后它就如预期的那样工作了

分叉工作示例：