Datatablesを使った管理画面でページ移動した際に発火しない

Question

サイトの管理画面でライブラリのDatatablesを使用しています。
https://datatables.net/

各行毎に入力エリアがあり、保存ボタンを設置しています。

<tr>
	<td>100</td>
	<td><input type="text" id="desc1_100" value=""></td>
	<td><button type="button" id="smt100">保存</button></td>
</tr>

行は動的に出力していますので、formもJSも別箇所に動的に出力しています。

<form method="post" id="form_100" action="./">
	<input type="hidden" name="id" value="100">
	<input type="hidden" id="desc2_100" name="description" value="">
</form>
～～
$("#smt100").on("click", function() {
	$("#desc2_100").val($("#desc1_100").val());
	$("#form_100").submit();
});

最初に表示される行についてはこれで問題なく動くのですが、ページネーションをクリックし、dispay:noneで隠れていたページの行になると発火しません。

jQueryの部分をdiv#addjsで囲い、

$('.paginate_button').on('click', function() {
  $('#addjs').load(document.URL+'#addjs');
});

で行けるかな・・と思いましたが、残念ながらDatatables部分のレイアウトが崩れてしまいました。

何卒ご指南を頂きたく、お願い致します。

Comments

[kei344]

「動的に出力」とはどのような仕組みでしょうか。

[takepieee]

外出しており、ご返答が遅れ申し訳ありません。PHPで結果をループして出力しております。

Answer 1

<button type="button" id="smt100">保存</button>が書きかえられた時にイベントリスナが壊れます。
詳しくは「jQuery デリゲート」あたりでググるといいと思いますが、↓あたりを読んでみてはいかがでしょうか。

Ajaxなどで追加した要素に対して、.clickメソッドなどでの操作は行えない。

jQueryで追加した要素を操作するにはon()メソッドで - Qiita

Comments

[takepieee]

$(document).on('click','#smt100',function(){...
に変更することで完璧に動きました。
ありがとうございました