标题的按钮单击在数据表中不起作用答案

【问题标题】：button click of header not working in datatable标题的按钮单击在数据表中不起作用
【发布时间】：2013-10-08 09:31:45
【问题描述】：

在 javascript 中，我有以下代码 $(document).ready(function() {

            var someObj = [];
            $("#submit").click(function() {
                $("input:checkbox").each(function() {
                    if ($(this).is(":checked")) {
                        someObj.push($(this).attr("name"));
                    }
                    console.log(someObj);
                })
            });
            $("#selectAll").click(function() {
                $("input:checkbox").attr('checked', this.checked);
            }
            );
            $("#btn1").on("click", function() {
alert("refresh clicked");
});
            var oTable = $('#example').dataTable({
                "sDom": '<"top"<"#refresh">ip>rt<"clear">',
                "bLengthChange": true,
                "bPaginate"
                        : true,
                "bFilter"
                        : true,
                "aoColumnDefs": [
                    {"bSortable": false, "aTargets": [0]}
                ],
                /*"aoColumns": [
                    {type:"hidden"},
                    {type: "select", values: ['All', 'Red Cross', 'Save The Bay']},
                    {type: "select", values: ['All', 'Humanitarian', 'Educational', 'Environmental']},
                    null,
                    null,
                    null,
                    {type: "select", values: ['All', 'Approved', 'Pending', 'Rejected']}
                ],*/    
                "bInfo"
                        : true,
                "bAutoWidth"
                        : true}).
                    columnFilter();
            $("#refresh").html('<input type="button" value="reject" id="btn1" />');
            function fnCreateSelect(aData)
            {
                var r = '<select><option value=""></option>', i, iLen = aData.length;
                for (i = 0; i < iLen; i++)
                {
                    r += '<option value="' + aData[i] + '">' + aData[i] + '</option>';
                }
                return r + '</select>';
            }
            new FixedHeader(oTable, {"top": true});
        });
</script>

在 html 中我有以下代码。

  <table  id="example"  class="display">
        <thead>
        <th><input type="checkbox" id="selectAll"></th>
        <th>Organization Name</th>
        <th>Type Of Event</th>
        <th>Date Range</th>
        <th>Location</th>
        <th>No of Hours</th>
        <th>Status</th>
        <th>Actions</th>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Organization Name</th>
            <th>Type Of Event</th>
            <th></th>
            <th></th>
            <th></th>
            <th>Status</th>
            <th></th>
        </tr>
    </tfoot>
    <tbody>

        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="1" name="check1"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="2" name="check2"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="3" name="check3"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="4" name="check4"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="5" name="check5"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="6" name="check6"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="7" name="check7"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="8" name="check8"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="9" name="check9"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="10" name="check10"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="11" name="check11"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="12" name="check12"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="13" name="check13"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="14" name="check14"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td><input type="checkbox" value="15" name="check15"></td>
            <td class="read_only">Save The Bay</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td><input type="checkbox" value="16" name="check16"></td>
            <td>Red Cross</td>
            <td>Educational</td>
            <td>2012-09-01</td>
            <td class="center">Abc</td>
            <td class="center">23</td>
            <td>Approved</td>
            <td>action</td>
        </tr>
    </tbody>
</table>
<input type="submit" value="submit" id="submit" />

我要做的是在初始化时动态创建名为 refresh 的 div，然后将按钮添加到该 div 但单击该按钮不起作用。

【问题讨论】：

向我们展示整个代码，仅根据您提供给我们的信息片段，很难猜出您的意思
说真的，您能否更清楚地了解您的问题是什么......？？

标签： jquery datatable

【解决方案1】：

on() 和 live() 允许您将任何所需的事件处理程序委托给：当前元素或将添加到 DOM 的任何未来元素

用于jquery

$('button').live('click', function(){

});

现在 .live() 在 jQuery 1.7 版中被弃用并在 1.9 版中被删除，我们需要使用 .on() 方法

用于 jquery > 1.7

$('button').on('click', function(){

});

【讨论】：

【解决方案2】：

我认为问题在于#btn1 是动态创建的，因此动作处理程序没有绑定到它。使用

$("#btn1").on("click", function() {
    alert("refresh clicked");
});

改为。

【讨论】：

【解决方案3】：

表格标题中的按钮也有类似的问题。同时我有另一个表格，我一直在使用一个元素来清除表格中的过滤数据。我不明白为什么一个有效而另一个无效。特别是当 onEvent 清楚地表明该元素正在被拾取并且应该已附加单击事件时。我想有人已经说过这可能是因为滚动重绘。

但是。我发现如果我转到数据表的父元素，然后在点击事件确实粘住的元素上进行查找。

原创

    onEvents: function ($ctrl, $tbl) {
    $('[controller=btnAttachmentAdd]', $ctrl).on('click', function () {
        alert(1);
    });
}

函数引入了jquery的Controller对象和table对象。

    onEvents: function ($ctrl, $tbl) {
    $ctrl.parents('.well').find('[controller=btnAttachmentAdd]').on('click', function () {
        alert(1);
    });
},

通过将元素的搜索区域移动到具有类 '.well' 的父 div，我能够让事件保持附加到按钮。

很抱歉，如果此代码与 Event 上的数据表返回的内容略有不同，因为我实际上为数据库中的每个表设置了一个对象。然后我为不同类型的列表设置不同的格式来显示。然后我调用一些 JS 对象设置来充当列表的控制器，将列设置为所需的列表并为其附加所有事件。

无论如何，希望事件附件代码有所帮助。

【讨论】：