[解決済み] jQuery $(".class").click(); - 複数要素のクリックイベントを1回にする。

質問

同じ名前のページで複数のクラスを持っています。そして、私は私のJSで.click()イベントを持っています。私が起こしたいことは、私のページ上の複数のクラスに関係なく、クリックイベントが一度だけ起こることです。

シナリオは、カートに追加するためにAJAXを使用していることです。これは、同じクラス .add .#productid# が存在し、クリックされたときにカートに追加する AJAX が 2 回発生することを意味します。

私は「クリックエリア」を作ることを考え、.container-name .add .#pid#を持つようにし、その結果、ユニークなクリックを与えるようにしました。

これが唯一の解決策でしょうか。

<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>


$(".addproduct").click(function(){//do something fired 5 times});

どのように解決するのですか？

この古いスレッドをバンプするために申し訳ありません。私は今同じ問題を抱えていた、と私は私の解決策を共有したいと思いました。

$(".yourButtonClass").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    //(... rest of your JS code)
});

event.StopPropagation そして event.StopImmediatePropagation() を使えばいいのです。

イベントハンドラ用の.classセレクタを持つと、結果的に bubbling のクリックイベントが発生します（DOM内の親要素に発生することもあれば、子要素に発生することもあります）。

event.StopPropagation() メソッドはイベントが親要素にバブルしないことを保証し、一方 event.StopImmediatePropagation() メソッドは、イベントが目的のクラスセレクタの子要素にバブルしないようにします。

ソースは https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/