datatablesページネーションクリック後のonclick処理

Question

phpでテーブルを出力し、dataTablesで整形しています。
https://datatables.net/

各行に編集ボタンを出力し、クリックすると編集画面が開くという仕様です。
データはtrの無限出力で、jsonは使っていません。

1ページに表示されている編集ボタンは開くのですが、ページング機能を使って2ページ目以降に移動していから編集をクリックしてもイベントが発生せずに困っている状況です。

<table id="dtable">
	<thead>
		<tr>
			<th>#</th>
			<th>タイトル</th>
			<th class="text-right">編集</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>あれこれ</td>
			<td class="text-right"><button type="button" data-pid="1" class="edit-page"><i class="glyphicon glyphicon-pencil"></i></button></td>
		</tr>
		...
	</tbody>
</table>

$(document).ready(function(){

	$('#dtable').DataTable({
		"dom": 'lCfrtip',
		"order": [],
		"colVis": {
			"buttonText": "表示カラム",
			"overlayFade": 0,
			"align": "right"
		},
		"language": {
			"lengthMenu": '_MENU_ 件づつ表示',
			"search": '<i class="glyphicon glyphicon-search"></i>',
			"info": '全_TOTAL_件中 _START_件から_END_件を表示中',
			"paginate": {
				  "previous": '<i class="glyphicon glyphicon-chevron-left"></i>',
				  "next": '<i class="glyphicon glyphicon-chevron-right"></i>'
			}
		}
	});
	$('.edit-page').on('click', function() {
		var pid = $(this).data('pid');
		// 処理
	});
});

1ページ目の編集ボタンには、コンソールでonclickが設定されているのが確認出来ます。
2ページ目以降はコンソールを確認しても確認出来ません。
データはTR垂れ流しなので、1ページ目と2ページ目に差はありません。

Answer 1

2ページ目も class="edit-page" が出力されているのであれば、下記のようにすれば動きませんか？

$( '#dtable' ).on( 'click', '.edit-page', function() {
	// 処理
} );

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

Comments

[takepieee]

完璧に動きました。
明確なご回答ありがとうございます。