ページング時にjQueryイベントがもう受信されない

Question

私はbootstrap-tableに実装されたページングを使用しています。最近、私のカスタムjQueryスクリプトは使用できなくなることに気付きました。ここでは、より正確に

は抜粋です：

$(document).ready(function() { 
 

 
    $('.form-modal-confirm-remove').click(function() { 
 

 
    alert("Test"); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-fr-FR.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table data-toggle="table" data-classes="table table-hover table-condensed table-no-bordered" data-pagination="true" data-page-size="2"> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     <th>Actions</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     Test 
 
     </td> 
 
     <td> 
 
     <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer"> 
 
      <i class="fa fa-trash"></i> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     2 
 
     </td> 
 
     <td> 
 
     Test 
 
     </td> 
 
     <td> 
 
     <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer"> 
 
      <i class="fa fa-trash"></i> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     3 
 
     </td> 
 
     <td> 
 
     Test 
 
     </td> 
 
     <td> 
 
     <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer"> 
 
      <i class="fa fa-trash"></i> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

削除ボタン、警報ショーアップのクリックでそれを見ることができます。次に、2ページ目に移動すると、アラートはもう表示されません。

ページ1に戻ることができますが、アラートは表示されません。

Answer 1

を代わり.click方法の .onを使用してくださいことがあります。 .onメソッドは、動的に追加された要素に対して機能します。

$(document).ready(function() { 

    $(document).on('click','.form-modal-confirm-remove',function() { 

    alert("Test"); 

    }); 

}); 

Answer 2

DOMが再度読み込まれたため、イベントリスナーがありません。 2ページ目の削除ボタンと共にjsハンドラを印刷する必要があります。または単に追加します。

バックエンドでは何を使用していますか？ PHPなどの場合は、動的にIDを生成することができます。あなたがいない場合でも場合には、単にあなたは...

<buttontype="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer" onclick="delete_row();"><i class="fa fa-trash"></i></button> 

---

function delete_row(this) { 
    alert('hello'); 
}