DataTables中的事件隐藏者拒绝工作

时间:2015-05-20 08:49:39

标签: javascript jquery datatables

我没有让复选框做一个像我在这里尝试的简单提醒: https://jsfiddle.net/2n3dyLhh/5/ 问题是数据表(或我如何使用它)因为当我不包含库时,监听器工作得很好。

该复选框嵌入在databales列中。为什么这会失败?

Select SUM(RecommentedQuantity) FROM IndentDetails ID
LEFT OUTER JOIN Indent I On I.IndentID=ID.IndentID
WHERE ID.CreatedOn between convert(date,getdate()) and convert(date,getdate()-1)

<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>

2 个答案:

答案 0 :(得分:0)

您尝试下面的代码

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

答案 1 :(得分:0)

某些点击处理程序不起作用,因为在您分配处理程序时,dataTables会隐藏某些行。

因此,您必须使用委派的处理程序,将单击处理程序分配给DOM中显示的复选框。除此之外,你不必为每个复选框写一个点击处理程序;您可以将它减少到一个处理程序,并在该处理程序中根据所单击的复选框执行您想要的任何操作。

$("#eventsTable").on('click', '[type="checkbox"]', function () {
   alert('checkbox #'+$(this).attr('id')+' clicked'); 
});
分叉小提琴 - &gt;的 https://jsfiddle.net/s4z01p0z/