button click of header not working in datatable

Question

In javascript i have following code $(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>

In html i have following code.

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

What i am trying to do is create div named refresh dynamically at initialization time and then add button to that div but click of that button is not working.

Show us the whole code, it's really hard to gues what do you mean just basing on the scrap of info you gave us — Kamil T
– Kamil T, Commented Oct 8, 2013 at 9:33
Seriously could u be a little more clear on what ur problem is..?? — Nibin
– Nibin, Commented Oct 8, 2013 at 9:40

Nibin · Accepted Answer · 2013-10-08 10:19:24Z

1

on() and live() allows you to delegate any desired event handler to: current elements, or any future elements that will be added to the DOM

Use for jquery < 1.7

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

});

Now with .live() being deprecated in jQuery version 1.7 and removed in version 1.9, we need to use the .on() method

Use for jquery > 1.7

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

});

answered Oct 8, 2013 at 10:19

Nibin

3,9602 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamil T · Accepted Answer · 2013-10-08 09:42:56Z

1

I think that the problem is that the #btn1 is created dynamically, so action handlers aren't bind to it. Use

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

instead.

answered Oct 8, 2013 at 9:42

Kamil T

2,2161 gold badge19 silver badges28 bronze badges

Comments

Harry Binnendyk · Accepted Answer · 2018-02-08 16:30:55Z

I have been having a similar problem with a button in the header of the table. At the same time I have another table that I have been using an element to clear the tables filtered data. I couldn't figure out why one worked and the other didn't. Especially as the onEvent clearly showed that the element was being picked up and the click event should have been attached. I think someone already said that could be because of the redraw from the scrolling.

However. I found that if I went to the parent element of the datatable and then did a find on the element that the click event did indeed stick.

Original

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

The function brings in the jquery Controller object and table object.

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

By moving the search area for the elements to the parent div with the class '.well' I was able to get the event to stay attached to the button.

I'm sorry if this code is a seems a little different from what the datatable on Event returns as I actually set up an object for each table I have in the database. Then I set up different formats for the different types of lists to display. I then call some JS object set up to act as a controller for the list that sets the columns to the desired list and attaches all events for it.

Anyway, hope the Event Attachment code helps out.

Collectives™ on Stack Overflow

button click of header not working in datatable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related