データテーブルフィルタまたはページングの後にJavascriptが機能しない

Question

私はDjango ListViewを使用して請求書の一覧を表示しています。私は更新を送信するためにJavaScriptを使用しようとしています。例えば、請求書が支払われると、ユーザは行のアイコンをクリックすることができ、その請求書は支払済としてマークされる。すべてうまくいっていますが、私はユーザーに二次フィルタリングを許可するためにdatatableを使用しています。ページの読み込みでは、javascriptとcall to serverはうまく動作しますが、フィルタやページングを使用すると、Javascriptは行番号を取得しません。ただ、簡単にするために、私は警戒（）関数でそれをテストする - ここではHTMLです

HTML：

<table width="100%" class="table table-striped table-bordered table-hover" id="dt-invoice"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Inoice Number</th> 
      <th>Description</th> 
      <th>Date Sent</th> 
     </tr> 
    </thead> 
    <tbody> 
    {% csrf_token %} 
    {% for i in invoice %} 
     <tr id="{{ i.invoice }}"> 
      <td><a id='id_paid-{{ i.id }}' title="I Got This!" href="#"><i class="fa fa-check fa-fw"></i></a></td> 
      <td>i.invoice_number</td> 
      <td>i.invoice_description</td> 
      <td>i.invoice_sent_date</td> 
     </tr> 
    {% endfor %} 
    </tbody> 
</table> 

Javascriptを：

​​

任意のアイデアは？前もって感謝します！

Answer 1

あなたが最も近い静的コンテナにイベントをクリックして委任する必要があります

$('#dt-invoice').on('click', '[id^=id_paid-]', function() { 
    console.log("HERE") 
    row = $(this).closest('tr'); 
    trid = row.attr("id"); 
    alert(trid); 
}); 

時点であなただけのDOMで利用可能なマッチング要素がバインドされたイベントを取得し、それを結合しているので、あなたのクリックイベントが無視された理由があります。 Datatableプラグインは、tableコンテンツを変更し、ページング/フィルタリングで新しい要素を削除/追加します。 table要素（最も近い静的要素）にバインドすると、これらのすべての動的要素も処理されます。

[参考]

• Delegation
• jQuery $.fn.on()