点击事件被触发两次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 是删除按钮，然后提示 deleteRecord 函数。问题是，在我删除一个列表元素后，deleteRecord 函数似乎触发了两次。如果我发出警报（rowid）；删除第一个元素后，它会给出我删除的前一个列表元素的 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

试试这个。

拆分您的事件处理程序。使用全局变量，或者如果这全部包含在函数中，则使用私有变量来存储要在第二个事件处理程序中使用的 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;
});

Answer 2

每次设置点击处理程序时，它都会向事件“气泡”添加一个，从而重复调用。一个快速的解决方案是使用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);
    });
});

更好的解决方案是分离事件并在删除元素上设置 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);
});