jQuery event priority

Question

I have an element which I bind more than one event handlers:

<div id="info">
    <button class="action-delete" type="button">Delete</button>
</div>


$("#info").on("click", ".action-delete", function() {
    $.event.trigger({
        type: "application",
        message: {
            name: "item-delete",
            item: $("#info").data("item")
        }
    });
});

Then I want the user to make sure before the delete operation is done, since there are so many elements with action-delete working for different models, so I tried to inject the following scripts to the page(from another js file):

$(document).on("click", ".action-delete", function(e) {
    return confirm("Sure to delete?");
})

However I found that event the confirm window displayed, the delete operation is still completed before the user choose.

Any idea to fix it?

Answer 1

The problem is in your confirm call here:

$(document).on("click", ".action-delete", function(e) {
    return confirm("Sure to delete?");
})

It should be something like this:

$(document).on("click", ".action-delete", function(e) {
    e.preventDefault(); //prevent default behavior
    var conf = confirm("Sure to delete?");
    if(conf == true){
      $("#info").trigger( "click" ); //trigger click event for delete
    }
});

Plus I would recommend removing the click event from the parent div. Instead make a delete function and let the confirm dialog ('yes') trigger the function.