Click event being fired twice jQuery

Question

I have some code here:

$(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);
                          });
});

and the deleteRecord function:

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

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

                                      ,nullHandler);
               });

The first onclick is when I click the list element. This prompts a popup with a delete button. The second onclick is the delete button which then prompts the deleteRecord function. The problem is, the deleteRecord function seems to be firing twice after I have deleted one list element. If I do an alert(rowid); after deleting the first element, it gives me the id of the previous list element I deleted and the one I'm deleting now.

Can anyone tell me why it is firing twice? I have done some research and tried preventDefault and preventPropagation but these don't seem to work.

When I delete a listitem it deletes the row that is associated with it from a table. The listview is then emptied and the results are relisted. Thing is, the event firing twice is also messing with that and for some reason the second list element I try to delete only deletes from the database but stays on the page and copies of the other list elements are produced. I really don't know what's going on, any help would be appreciated.

Incase it is needed, this is where the rowid data comes from:

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

Try this.

Split up your event handlers. Use a global variable or if this is all wrapped in a function a private variable to store the rowid to use in the second event handler. It will work fine for you. You can optionally null the rowid in the second event handler also. Check out the fiddle

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

Everytime you set the click handler it's adding one more to the event "bubble" thus the repeated calls. A quick solution would be to use off() to remove the previous handler.

$(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);
    });
});

A better solution would be to separate the events and set the rowid on the delete element:

$(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);
});