jQuery 移动代码产生越来越多的行

Question

大家好，溢出者，

我的 jQuery 移动代码中出现了一些错误，我无法弄清楚是什么问题。

这是代码

.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"。在对话框中，我有许多 table 行的文本输入字段，每个字段都有一个 id+counter，其结构与 addThis-Variable 中的 html 相同。最后有一个添加按钮，它应该在 table.

中创建一个新行

现在这是一个测试用例：

按一个按钮打开对话框 -> 对话框打开
按添加按钮 -> 生成新行 -> 确定！

这是另一个测试用例：

按一个按钮打开对话框 -> 对话框打开
按添加按钮 -> 生成新行
关闭对话框 -> 对话框关闭，我回到了主页
按一个按钮打开对话框 -> 对话框打开
按添加按钮 -> 生成两行！ -> 不正常！

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

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

提前感谢您的回复。 r-kane 在这里提出他的第一个问题

Answer 1

我无法测试这种情况，但我猜 "pageshow" 被触发了不止一次。尝试添加

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

之前

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

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

Answer 2

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

因此，当您第二次打开（显示）对话框时，#buttonAdd 会附加 2 个 on click 事件，当您单击它时会触发 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");
    });

jQuery 移动代码产生越来越多的行

jQuery Mobile code producing more and more lines

html

javascript

jquery

dialog