Jquery Datatables event handler not working with paging

Question

I have table with last column is an element to get entire row data,

When I use paging, only the first page that triggers my event handler, page 2 - 3 - 4 and so on do not trigger my event handler.

When I disable paging, all records trigger my event handler.

Below is the javascript for initialization and the event handler

var OTkaryawan = $('#table_karyawan').dataTable({ });

$(".select_row").click(function() {
//                    var row = $(this).closest('tr')[0];
//                    var aData = OTkaryawan.fnGetData(row);
//                    alert(aData[0]);
                    alert('A');
                });

Below is the html for my table

<table id="table_karyawan" style="border: 1px #ccc solid;">
                    <thead>
                        <tr>
                            <th>NIK</th>
                            <th>Nama Lengkap</th>
                            <th>Lokasi Kerja</th>
                            <th>Departemen</th>
                            <th>Jabatan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($master_karyawan as $key => $value): ?>
                            <tr>
                                <td><?= $value['nik']; ?></td>
                                <td><?= $value['nama']; ?></td>
                                <td><?= $value['lokasikerja']; ?></td>
                                <td><?= $value['departemen']; ?></td>
                                <td><?= $value['jabatan']; ?></td>
                                <td class="select_row">Select</td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>

Below is a jsfiddle demonstrating this behavior. http://jsfiddle.net/stefenwiranata/3ZLth/

Answer 1

Try attaching an event listener using the .on() function like this.