Question

你好溢出物，

我的jQuery Mobile代码中有一些strage错误，我无法弄清问题是什么。

这是代码

.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");
    })
})

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

现在这是一个测试用例：

按按钮打开对话框 - ＆gt;对话框打开
按添加按钮 - ＆gt;生成新行 - ＆gt; OK！

这是另一个测试用例：

按按钮打开对话框 - ＆gt;对话框打开
按添加按钮 - ＆gt;生成新行
关闭对话框 - ＆gt;对话框关闭，我回到主页
按按钮打开对话框 - ＆gt;对话框打开
按添加按钮 - ＆gt;生成两行！ - ＆GT;不行！

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

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

提前感谢您的回复。 r-kane和他的第一个问题

Answer 1

我无法测试这种情况，但我想这是＆＃34; Pageshow＆＃34;被触发超过一次。尝试添加

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

之前

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

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

Answer 2

我认为这是因为你在 #buttonAdd 添加一个.on（＆＃39;点击＆＃39;，...）事件，每次显示对话框。（＆＃39; pageshow＆＃39; ...）

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

尝试删除.on（＆＃39; pageshow＆＃39; ...）或将其替换为：

$("#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 Mobile代码生成越来越多的行

2 个答案: