CODEWITHSUNDEEP
javascriptjqueryeventsevent-handlingdatatables
radbyx
radbyx

Reputation: 9660

How to add an event to jQuery's on() callback?

I tried this:

$('body').on('click', '.headerCheckbox', function (event) { // Add event here and magic should happen?
    event.stopPropagation(); // event output in firebug: event: [object Object]
    headerCheckboxClicked($(this));
});

It's a table, where I have a checkbox in a header in one of the columns. I want to stop event bubbling so the table doesn't get the event so it doesn't sorts the column.

I thought this was the right way but the table stills sorts after I added the line. I can't find a good example to work with in the jQuery Documentation.

Alternative solution The datatable way I disable sorting on the specify column. 

    table3 = $("#tableComputerPackages").DataTable({
        "order": [[1, "desc"]],
        "columnDefs":
        [
            {
                "targets": 0,
                "orderable": false
            }
        ]
    });

A. Wolff had the answer to the question thought. It was because I wrote the on() with the 3 parameters version instead of 2 which I am use to, so I didn't even think about it.

Upvotes: 1

Views: 79

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

If your datatable headers are static, you should just be able to bind event directly to checkboxes: 

$('.headerCheckbox').on('click', function (event) {
      event.stopPropagation(); 
      headerCheckboxClicked($(this));
});

Your issue was regarding how delegation works, using event bubbling (and filtering it out using event target), so actually you were stopping propagation at body level, the header click event was already fired, and so the sorting method already called.

Upvotes: 2

Related Questions