jQuery $（“。class”）。click（）; -複数の要素、イベントを1回クリック

同じ名前のページに複数のクラスがあります。次に、JSに.click（）イベントがあります。私がしたいのは、ページ上の複数のクラスに関係なく、クリックイベントが1回だけ発生することです。

シナリオは、カートに追加するために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のParent要素、Children要素の場合もあります）。

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

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

$(document).on('click', '.addproduct', function () {
    // your function here
});

クリックハンドラーが表示されますか？5つのリスナーを5つの異なる要素にアタッチしています。ただし、ユーザーが要素をクリックすると、1つのイベントのみが発生します。

$(".addproduct").click(function(){
  // Holds the product ID of the clicked element
  var productId = $(this).attr('class').replace('addproduct ', '');

  addToCart(productId);
});

この解決策が機能しない場合は、クリックハンドラーを確認したいと思います。

addproductクラスでdivをクリックすると、その特定の要素に対して5つではなく1つのイベントが発生します。イベントが5回発生した場合、コードで何か問題が発生しています。

この状況で私は試してみます：

$(document).on('click','.addproduct', function(){

    //your code here

 });

次に、同じクラスの他の要素で何かを実行する必要がある場合は、それらの1つをクリックすると、要素をループできます。

$(document).on('click','.addproduct', function(){
   $('.addproduct').each( function(){

      //your code here
     }
  );
 }
);

クリックイベントを5回追加すると思います。これを行う回数を数えてみてください。

console.log('add click event')
$(".addproduct").click(function(){ });

これで修正され、良い習慣になるはずです：.unbind（）

$(".addproduct").unbind().click(function(){
   //do something 
});

私は次のようなインラインjquery関数呼び出しを使用してそれを解決しました

<input type="text" name="testfield" onClick="return testFunction(this)" /> 

<script>
  function testFunction(current){
     // your code go here
  }
</script>

私はちょうど同じ問題を抱えていました。私の場合、PHPコードは同じjQueryコードを数回生成し、それが複数のトリガーでした。

<a href="#popraw" class="report" rel="884(PHP MULTIPLE GENERATER NUMBERS)">Popraw / Zgłoś</a>

（PHP MULTIPLE GENERATER NUMBERSも同じコードを複数回生成しました）

<script type="text/javascript">
$('.report').click(function(){...});
</script>

私の解決策は、スクリプトを別のphpファイルに分けて、そのファイルを1回ロードすることでした。

ここにコードを入力するだけですJQueryでは、onesイベントがトリガーされ、ファイル内のクラスの出現回数を確認して、次のロジックのforループを使用します。JQueryを使用して、クラス、タグ、またはDOM要素の出現回数を識別します。varlen= $（ "。addproduct"）。length;

 $(".addproduct").click(function(){
       var len = $(".addproduct").length; 
       for(var i=0;i<len;i++){
          ...
        }
 });

私も同じ問題を抱えていました。原因は、同じjqueryを数回使用したことです。彼はループに入れられました。

$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});

このため、複数回発砲していました

私は自分のプロジェクトでそれを自分で試しました。

テーブル内のすべての行には、クラス「contact」があります。

私のコードは次のようになります：

var contactManager = {};

contactManager.showEditTools = function(row) {
  console.debug(row);
}

$('.contact').click(function(event){
  console.log("this should appear just once!");
  alert("I hope this will appear just once!");
  contactManager.showEditTools(event);
});

そして、コードを実行したときに、Firebugコンソールに結果として行全体が表示されるのを最初に怖がっていました。

しかし、アラートダイアログが表示されなかったため、クリックイベントが発生しなかったことに気付きました。Firebugは、クリックの上書きによって影響を受ける要素のみを表示します。したがって、心配することは何もありません。

.off()ハンドラーを利用してみてください。

$(function () {
    $(".archive-link").click(function (e) {
        var linkObj = $(this);
        var cb = $("#confirm-modal");
        cb.find(".modal-body").append("<p>Warning message.</p>");
        cb.modal('show'); 
        cb.find(".confirm-yes").click(function () {
            $(this).off(); //detach this event
            //ajax call yada yada..
        }

OKモーダルボタンにクリックイベントハンドラーをアタッチして、clickクラスを持つオブジェクトのイベントを処理します.archive-link。

最初のクリックで、イベント.archive-linkは、関数にアクションを要求したオブジェクトに対してのみ発生します（var linkObj）。しかし、同じリンクを2回クリックして、モーダルで[OK].archive-linkを押すと、前にクリックしたオブジェクトがあるすべてのオブジェクトでイベントが発生します。

上記のソリューションを使用しましたが、残念ながら機能しませんでした。伝播が停止したのは、モーダルOKボタンクリック関数内で.off（）を呼び出したときでした。これがお役に立てば幸いです。

この質問は解決され、多くの回答がありましたが、何か追加したいと思います。私は、クリック要素が1回ではなく、77回発火した理由を理解しようとしていました。

私のコードでは、それぞれがあり、json応答を実行し、ボタン付きのdivとして表示していました。そして、それぞれの中でクリックイベントを宣言しました。

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");

    $('.test-button').click(function(){
        console.log('i was clicked');
    })
})

このようにコードを書くと、クラス.test-buttonは複数のクリックイベントを取得します。たとえば、私のデータには77行あるため、それぞれが77回実行されます。つまり、クラスのクリックイベントを77回拒否します。要素をクリックすると、77回発射されます。

しかし、あなたがそれをこのように書くなら：

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");
})

    $('.test-button').click(function(){
        console.log('i was clicked');
    })

それぞれの後にクリック要素を宣言しています。つまり、それぞれが77回実行され、クリック要素は1回だけ宣言されます。したがって、要素をクリックすると、1回だけ起動されます。

以下のコードを実行するだけで、完全に正常に機能します

$(".addproduct").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    getRecord();
});


function getRecord(){
   $(".addproduct").each(function () {
       console.log("test");
       });

}

こんにちは、この投稿をぶつけて申し訳ありませんが、この問題に直面しているだけです。私のケースを示したいと思います。

私のコードは次のようになります。

<button onClick="product.delete('1')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('2')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('3')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('4')" class="btn btn-danger">Delete</button>

Javascriptコード

<script>
 var product = {
     //  Define your function
     'add':(product_id)=>{
          //  Do some thing here
     },

     'delete':(product_id)=>{
         //  Do some thig here
     }
 }
</script>

あなたのイベントは一度だけトリガーされます...だからこのコードはうまくいくかもしれませんこれを試してください

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