Question about jQuery event delegation / Colvis / Colreorder / multiple table headers

kc5151

Hi,

I have the following problem.

My datatable has multiple header lines, the second one being with column search inputs.

Also, I have the Colvis and Colreorder plugins enabled.

When I mousedown on a column search input, Colreorder kicks in and I can drag the column. Which is not what I want. I can disable this behaviour by registering an event handler like the following:

$('input.localSearchInput').on('mousedown', function (event) {
  event.stopPropagation();
});

Now, the problem is, when I enable a previously invisible column with Colvis, the event handler doesn't apply to that "newly visible" column. I found out that I probably need a delegated event handler in this case:

$(document).on('mousedown', 'input.localSearchInput', function (event) {
  event.stopPropagation();
});

The problem here is: it doesn't stop the mousedown event from propagating to Colreorder, unlike when I'm directly registering on input.localSearchInput and I do not understand why.

Does anybody have an idea?

Thanks a bunch in advance.

kthorngren

Not sure why the delegated event doesn't work. Possibly turning off the mousedown event will work. See this test case:
https://live.datatables.net/giharaka/1825/edit

It uses columns().every() in initComplete to turn off the mousedown in the 2nd header row using column().header().

Kevin

kthorngren

You could use the same technique with columns.every() to use .on and stopPropagation() if you prefer that method.

Kevin

kc5151

Thank you so much once more! I did it like in your example and it works like a charm!