JavaScriptのクリックイベントの確認ダイアログ

Question

後、私はそれに2つのクリックハンドラを持つボタンがあります。

1. は、アクションを確認するために、ユーザーにネイティブJavaScriptの確認ダイアログを表示します。
2. 一部の属性を別のフォーム要素に設定し、そのフォームを送信します。

彼らはjQueryのベースだと次のようになります。

$('[data-confirm]').on('click', function (e) { 
    if (! confirm($(this).data('confirm')) { 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    } 
}); 

$('.js-remove-item').on('click', function (e) { 
    e.preventDefault(); 

    console.log('clicked'); 

    var $form = $('#remove-item-form'); 

    $form.attr('action', $(this).data('url')); 
    $form.submit(); 
}); 

ボタンHTMLは次のようになります。

<button type="button" 
     class="btn btn-primary js-remove-item" 
     data-confirm="Are you sure you want to remove this item?"> 

しかし、コンソールログを確認するダイアログとして「クリック」表示されています。ユーザーがの場合は、そのイベントリスナーが起動するのは、のアクションを確認するだけです。

どうすればいいですか？

Answer 1

これを解決する方法を見つけました。

「アイテムを削除」ロジックでは、クラスをボタン自体に追加するのではなく、親エレメントに追加しました。バブリングを使用すると、ボタン自体のすべてのリスナーがトリガーされることを意味します（確認ダイアログ）。そのイベントが伝播すると、それは "remove item"クラス名とロジックがバインドされている親クラスに通知されます。