按钮单击标头不在数据表中工作

Question

在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添加按钮，但单击该按钮不起作用。

Answer 1

我认为问题是#btn1是动态创建的，因此动作处理程序不会绑定它。使用

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

代替。

Answer 2

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

用于jquery＆lt; 1.7

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

});

现在，在jQuery 1.7版中弃用.live（）并在版本1.9中删除，我们需要使用.on（）方法

用于jquery＆gt; 1.7

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

});

Answer 3

我在表格标题中遇到了类似的问题。同时我有另一个表，我一直在使用一个元素来清除表中的过滤数据。我无法弄清楚为什么一个有效，另一个没有。特别是当onEvent清楚地显示元素被拾取并且应该附加点击事件。我想有人已经说过这可能是因为滚动重绘了。

然而。我发现如果我去了数据表的父元素，然后在元素上找到了click事件确实坚持的那个。

原创

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

该函数引入了jquery Controller对象和表对象。

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

通过使用类'.well'将元素的搜索区域移动到父div，我能够使事件保持与按钮的连接。

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

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