Question

我正在使用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。

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

Answer 1

由于删除处理程序绑定到文档，因此事件不会到达那里，直到＆＃34;当前播放＆＃34;的点击处理程序之后。 section已运行，删除会导致该事件的元素。有几种方法可以解决这个问题，但这可能是最简单的方法：

//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

您可以使用stopPropagation（）方法。

因此，将删除功能更改为：

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

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

2 个答案: