Click事件被两次触发jQuery

Question

我在这里有一些代码：

$(document).on("click", ".updateRecordButton", function(event){
           var rowid = $(this).parents("li").data("rowid");
           $("#displayOptions").popup('open', { x: event.pageX, y: event.pageY });

           $(document).on("click", ".deleteRecord", function(event){
                          deleteRecord(rowid);
                          });
});

和deleteRecord函数：

function deleteRecord(rowid){
db.transaction(function(transaction) {

               transaction.executeSql('DELETE FROM Table1 WHERE "Id" = "'+rowid+'"'

                                      ,nullHandler);
               });

第一个onclick是当我单击列表元素时。 这会提示带有删除按钮的弹出窗口。 第二个onclick是删除按钮，然后提示deleteRecord函数。 问题是，删除一个列表元素后，deleteRecord函数似乎被触发两次。 如果我做警报（行话）； 删除第一个元素后，它为我提供了我删除的上一个列表元素的ID，以及我现在要删除的列表元素的ID。

谁能告诉我为什么它发射两次？ 我已经进行了一些研究，并尝试了preventDefault和preventPropagation，但是这些似乎不起作用。

当我删除列表项时，它将从表中删除与之关联的行。 然后清空列表视图，并重新列出结果。 事实是，触发两次的事件也使该问题变得混乱，并且由于某种原因，我尝试删除的第二个列表元素仅从数据库中删除，但停留在页面上，并生成了其他列表元素的副本。 我真的不知道发生了什么，任何帮助将不胜感激。

如果需要，这是rowid数据来自的地方：

transaction.executeSql('SELECT * FROM Table1', [],
                                      function(transaction, result) {
                                      if (result != null && result.rows != null) {
                                      for (var i = 0; i < result.rows.length; i++) {
                                      var row = result.rows.item(i);
                                      $('#records').append('<li data-rowid="' + row['Id'] + '"><a href ="#" class="updateRecordButton">'+ 'Test: ' + row['colum1'] + '</a></li>');



                                      }
                                    $("#records").listview("refresh");

                                      }
                                      },errorHandler);
               },errorHandler,nullHandler);

Answer 1

每次设置点击处理程序时，都会向事件“气泡”中添加一个事件，从而重复调用。 一种快速的解决方案是使用off()删除以前的处理程序。

$(document).on("click", ".updateRecordButton", function (event) {
    var rowid = $(this).parents("li").data("rowid");
    $("#displayOptions").popup('open', {
        x: event.pageX,
        y: event.pageY
    });

    $("#displayOptions .deleteRecord").off("click").on("click", function (event) {
        deleteRecord(rowid);
    });
});

更好的解决方案是分离事件并在delete元素上设置rowid：

$(document).on("click", ".updateRecordButton", function (event) {
    var rowid = $(this).parents("li").data("rowid");
    $("#displayOptions").popup('open', {
        x: event.pageX,
        y: event.pageY
    });
    $("#displayOptions .deleteRecord").data("rowid", rowid);
});

$(document).on("click", ".deleteRecord", function(event){
    var rowid = $(this).data("rowid");
    deleteRecord(rowid);
});

Answer 2

尝试这个。

拆分事件处理程序。 使用全局变量，或者如果所有都包装在函数中，则使用私有变量来存储要在第二个事件处理程序中使用的rowid。 它会为您工作正常。 您还可以选择在第二个事件处理程序中使rowid无效。 查看小提琴

http://jsfiddle.net/Y4gLK/

var rowid; //Global Variable to allow the rowid to pass between the two event handlers.

$(document).on("click", ".updateRecordButton", function(event){
    //set global variable rowid
    rowid = $(this).parents("li").data("rowid");
    $("#displayOptions").popup('open', { x: event.pageX, y: event.pageY });
});

$(document).on("click", ".deleteRecord", function(event){
    //use global variable rowid's value as a parameter to deleteRecord function
    deleteRecord(rowid);
    //optionally you can delete rowid here!
    return false;
});