1

我正在使用 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()不会调用方法。

要查看它的实际效果，请访问此站点。

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

4

2 回答 2

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>');
});
于 2013-08-28T17:58:42.070 回答
0

您可以使用 stopPropagation() 方法。

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

$(document).on("click", ".swipe-delete .delete a", function(e) {
    e.stopPropagation();
    $(this).closest("li").remove();
});
于 2013-08-28T17:53:26.057 回答