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

削除ハンドラーはドキュメントにバインドされているため、「現在再生中」セクションのクリック ハンドラーが実行され、イベントの原因となる要素が削除されるまで、イベントはそこに到達しません。これを修正するにはいくつかの方法がありますが、これがおそらく最も簡単な方法です。

//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 に答える