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 忘记该元素的参数类型的所有事件。

Answer 2

我认为这是因为您在 #buttonAdd 每次显示对话框时添加一个 .on('click', ...) 事件 .on('pageshow' ...)

因此，当您第二次打开（显示）对话框时，2 on click 事件会附加到 #buttonAdd，并且当您单击它时会触发 2 on click 事件。

尝试删除 .on('pageshow' ...) 或将其替换为：

$("#dlg1").on("click", "#buttonAdd", 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");
    });