javascript - jQuery Mobile 代码产生越来越多的行

Question

你好，溢出者，

我的 jQuery Mobile 代码中有一些错误，但我不知道问题出在哪里。

这是代码

.on("pageshow", "#dlg1", function(){
    $("#buttonAdd")
    .on("click", function(){
        var n = $("input[id^=modDescription]").length;
        var addThis = "";
        addThis = '<tr class="modRow"><td><input type="text" data-clear-btn="true" name="modDescription' + n + '" id="modDescription' + n + '" value=""></td>';
        addThis += '<td><input type="number" name="modValue' + n + '" id="modValue' + n + '" value=""></td><td><button class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext" id="modDelete' + n + '"></button></td></tr>';
        $("#tabDialog > tbody").append(addThis).trigger("create");
    })
})

一些解释:我有一个带有各种按钮的页面。按下时，所有按钮都会打开相同的对话框“dlg1”。在对话框内，表行中有许多文本输入字段，每个字段都有一个 id+counter，其 html 结构与 addThis-Variable 内的结构相同。最后有一个添加按钮，它应该在表格内创建一个新行。

现在这是一个测试用例:

• 按按钮打开对话框 -> 对话框打开
• 按添加按钮 -> 生成新行 -> 确定!

这是另一个测试用例:

• 按按钮打开对话框 -> 对话框打开
• 按添加按钮 -> 生成新行
• 关闭对话框 -> 对话框关闭，我回到主页
• 按按钮打开对话框 -> 对话框打开
• 按添加按钮 -> 生成两行! -> 不行!

我在页面和对话框之间切换的次数越多，使用添加按钮生成的行就越多。

为什么会这样呢？我究竟做错了什么？我怎样才能解决这个问题？如果需要，我可以提供更多信息(代码)。

预先感谢您的回复。r-kane 提出了他的第一个问题

Answer 1

我无法测试这种情况，但我猜想“pageshow”被多次触发。尝试添加

$("#buttonAdd").unbind("click")

之前

$("#buttonAdd").on("click"...

unbind 告诉 jquery 忘记该元素的参数类型的所有事件。