Jquery/Javascript：要素がテーブル内にある場合、jqueryのセレクタが機能していません。​​

Question

jqueryとテーブルの間に何が起こっているか説明できますか？

<table class="table table-responsive" id="student-table"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Address</th> 
     <th>Action</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="student in students"> 
     <td>{{student.firstname}}</td> 
     <td>{{student.age}}</td> 
     <td>{{student.address}}</td> 
     <td><button class="btn btn-danger" id="delete-button" > Delete </button></td> 
    </tr> 
</tbody> 

私のjavascriptのコードは次のとおりです：上記のこのコードは動作しません

$('#delete-button').on('click', function() { 

    console.log('delete btn clicked!'); 

}); 

しかし、私は表の外に私の削除BTNを入れた場合、ボタンは現在応答している私はここのコードを持っています私はそれをクリックします。それはどうやって起こるのですか？

Answer 1

問題：重複ID。

IDが重複している場合、スクリプトはHTMLの先頭から特定のIDを解析して最初の要素に対してのみ機能します。テストしてみると、最初の行の削除ボタンでのみ動作することがわかります。

ソリューション：classであなたのイドを交換し、あなたのセレクタにこのクラスを使用する。..

<button class="btn btn-danger delete-button" >

$('.delete-button').on('click'....