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

Question

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.

The table is from datatable.net. They have their own events. I didn't do anything with that, if that's what you mean. I thought I just could add event to function(event).. — radbyx
– radbyx, Commented Mar 16, 2015 at 13:52
This is due to how delegation works. Here, your click event already has bubbled through the DOM to the body level. Simplest solution is to attach onclick event using inline attribute, see e.g, stackoverflow.com/a/28571944/1414562 Now, i'm not a datatable expert but i guess you could filter it using more relevant method and avoid sorting if the target event is a checkbox. Maybe provide more info as how do you initialize datatable in question itself. Anyway, adding datatable tag in question, so an expert could more easily see it and maybe answers. — A. Wolff
– A. Wolff, Commented Mar 16, 2015 at 14:16
Ahh ofcourse. It's because the bubbling already reached up to the body. Makes sense. — radbyx
– radbyx, Commented Mar 16, 2015 at 14:18
That's said, if your datatable headers are static, you should just be able to bind event directly to checkboxes: $('.headerCheckbox').on('click', function (event) {event.stopPropagation(); //...}); — A. Wolff
– A. Wolff, Commented Mar 16, 2015 at 14:18

A. Wolff · Accepted Answer · 2015-03-16 14:29:26Z

2

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.

answered Mar 16, 2015 at 14:29

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related