DataTables 中的事件监听器拒绝工作

Question

我没能像我在这里尝试的那样让一个复选框做一个简单的警报： https://jsfiddle.net/2n3dyLhh/5/ 问题是数据表（或我如何使用它），因为当我不包含库时，听众可以完美地工作。

复选框嵌入在数据栏中。为什么会失败？

<table id="eventsTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Checkbox
            <input type="checkbox" id="checkall" />
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>
            <input type="checkbox" id="checkbox1" name="checkbox1"/>
        </td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>
            <input type="checkbox" id="checkbox2" />
        </td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>
            <input type="checkbox" id="checkbox3" />
        </td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>
            <input type="checkbox" id="checkbox4" />
        </td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>
            <input type="checkbox" id="checkbox5" />
        </td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>
            <input type="checkbox" id="checkbox6" />
        </td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>
            <input type="checkbox" id="checkbox7" />
        </td>
    </tr>
    <tr>
        <td>Rhona Davidson</td>
        <td>
            <input type="checkbox" id="checkbox8" />
        </td>
    </tr>
    <tr>
        <td>Colleen Hurst</td>
        <td>
            <input type="checkbox" id="checkbox9" />
        </td>
    </tr>
    <tr>
        <td>Sonya Frost</td>
        <td>
            <input type="checkbox" id="checkbox10" />
        </td>
    </tr>
    <tr>
        <td>Jena Gaines</td>
        <td>
            <input type="checkbox" id="checkbox11" />
        </td>
    </tr>
    <tr>
        <td>Quinn Flynn</td>
        <td>
            <input type="checkbox" id="checkbox12" />
        </td>
    </tr>
</tbody>

$(document).ready(function () {
$.extend($.fn.dataTable.defaults, {
    "columns": [null, {
        "orderable": false
    }]
});
$('#eventsTable').DataTable();

});
$("#checkall").on('click', function () {
     $('#eventsTable').DataTable()
        .column(1)
        .nodes()
        .to$()
        .find('input[type=checkbox]')
        .prop('checked', this.checked);
});

$("#checkbox12").on('click', function () {
     alert('it works');
});
$("#checkbox1").on('click', function () {
     alert('it works');
});
alert('one can do alerts in jfiddle');

Answer 1

你试试下面的代码

$('body').on('click', '#checkbox1', function () {
        alert('it works');
});

Answer 2

一些点击处理程序不起作用，因为在您分配处理程序时，一些行被 dataTables 隐藏了。

因此您必须使用委托处理程序将点击处理程序分配给出现在 DOM 中的复选框。除此之外，您不必为每个复选框都编写点击处理程序；您可以将它减少到一个处理程序，并在该处理程序中根据单击的复选框做任何您想做的事情。

$("#eventsTable").on('click', '[type="checkbox"]', function () {
   alert('checkbox #'+$(this).attr('id')+' clicked'); 
});

分叉 fiddle -> https://jsfiddle.net/s4z01p0z/

DataTables 中的事件监听器拒绝工作

Eventlisteners in DataTables refuse to work

javascript

jquery

datatables