jQueryで同じクラスの複数のボタン

Question

私のページに同じクラスの複数のボタンがあります。ボタンのクリックイベントでメソッドを呼び出そうとすると、そのメソッドはすべてのボタンに対して実行されます。同じクラス。

私のページのボタンは動的に作成されるので、各ボタンに異なるクラスを与えることはできません。

私は、指定されたクラスを持つ最初の要素をクリックしたときに特定のメソッドを実行するしか方法を探しています。

Answer 1

Jqueryの.first()関数を使用すると、最初の要素を取得してから、クリックイベントのみをバインドできます。

$(".sameClass").first().on("click", function() { console.log("clicked"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="sameClass">Button 1</button> 
 
<button class="sameClass">Button 2</button> 
 
<button class="sameClass">Button 3</button>

Answer 2

ここにある：

$("button").each(function(i, item) { 
 
    if(i === 0) { 
 
    $(item).on("click", function() { 
 
     console.log('works only for the first button'); 
 
    }) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class"test-class">btn 1</button> 
 
<button class"test-class">btn 2</button> 
 
<button class"test-class">btn 3</button> 
 
<button class"test-class">btn 4</button> 
 
<button class"test-class">btn 5</button>

私はすべてのボタンをループしてのみ彼らの最初のイベントリスナーを追加しています。