Jquery 按钮单击事件被另一个单击事件覆盖答案

【问题标题】：Jquery button click event is overwritten by another click eventJquery 按钮单击事件被另一个单击事件覆盖
【发布时间】：2013-08-29 01:58:42
【问题描述】：

我正在使用 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>');
});

所以，我正在实施滑动以删除按钮。在我启用当前播放部分之前，它可以正常工作。启用后，每当我尝试单击删除按钮时，事件都会被当前正在播放的函数拦截，并且不会调用方法remove()。

要查看它的实际效果，请访问site。

然后点击页脚中的“收藏夹”。在列表视图上滑动以显示删除按钮。尝试单击它，您将看到播放按钮出现而不是删除它。

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

由于删除处理程序已绑定到文档，因此在“当前播放”部分的单击处理程序运行之后，事件才会到达那里，删除会导致事件的元素。有几种方法可以解决这个问题，但这可能是最简单的：

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

【讨论】：

【解决方案2】：

您可以使用 stopPropagation() 方法。

所以把你的删除功能改成这样：

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

【讨论】：