Jquery button click event is overwritten by another click event

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.

Jason P · Accepted Answer · 2013-08-28 17:58:42Z

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>');
});

answered Aug 28, 2013 at 17:58

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rooster · Accepted Answer · 2013-08-28 17:53:26Z

0

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

answered Aug 28, 2013 at 17:53

Rooster

10.1k8 gold badges49 silver badges72 bronze badges

Collectives™ on Stack Overflow

Jquery button click event is overwritten by another click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related