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函数似乎触发了两次。如果我做警报（rowid）;删除第一个元素后，它会显示我删除的上一个列表元素的ID以及我现在删除的列表元素。

有谁能告诉我为什么要开两次？我做了一些研究，试过防止默认和防止传播，但这些似乎不起作用。

当我删除listitem时，它会从表中删除与其关联的行。然后清空列表视图并重新结果。事实是，事件触发两次也是搞乱的，并且由于某种原因，我尝试删除的第二个列表元素仅从数据库中删除但是停留在页面上并且生成其他列表元素的副本。我真的不知道发生了什么，任何帮助都会受到赞赏。

需要它，这是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

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

点击事件被激活两次jQuery

2 个答案: