jQuery按钮单击事件被另一个单击事件覆盖

Question

I'm building mobile theme using jquery-mobile.

//Swipe to reveal delete icon
$(".swipe-delete li").on("swipe", function(e) {
    $(".swipe-delete .delete").remove();
    $(this).find(".ui-btn-inner").append('<div class="delete"><a href="#">Delete</a></div>');
});

//Click to delete fav from list
$(document).on("click", ".swipe-delete .delete a", function() {
    $(this).closest("li").remove();
});

//Currently playing
$(".ui-listview li").on("click", function() {
    $(".ui-listview .playing").remove();
    $(".swipe-delete .delete").remove();
    $(this).find(".ui-btn-inner").append('<div class="playing"><a href="#">Playing</a></div>');
});

So, I'm implementing swipe to delete a button. It works correctly until I enable currently playing section. When it is enabled, whenever I try to click the delete button the event is intercepted by currently the playing function and method remove() doesn't get invoked.

To see it in action please visit this site .

And click "favorites" in the footer. Swipe on the listview to show delete button. Try to click it and you will see that play button appears instead of removing it.

Answer 1

Since the delete handler is bound to the document, the event doesn't reach there until after the click handler for the "currently playing" section has run, removing the element that would cause the event. There are a few ways to go about fixing this, but this is probably the simplest:

//Currently playing
$(".ui-listview li").on("click", function(e) {

    // if the target of the event was the delete button, don't to anything
    if ($(e.target).is('.swipe-delete .delete a')) { return; }

    $(".ui-listview .playing").remove();
    $(".swipe-delete .delete").remove();
    $(this).find(".ui-btn-inner").append('<div class="playing"><a href="#">Playing</a></div>');
});

Answer 2

You can use the stopPropagation() method.

So change your remove function to this:

$(document).on("click", ".swipe-delete .delete a", function(e) {
    e.stopPropagation();
    $(this).closest("li").remove();
});