Datatables responsive loses click events in table row and bootstrap dropdrown issue

jsonjuri

When i resize the datatable to responsive mode all click events does not work anymore.
Also i am using a bootstrap dropdown inside my table row and it expands automatically when the datatable shows in responsive mode.

I am using the following to load the click events all working fine, but not in responsive mode.

fnDrawCallback: function(oSettings) {
$('.item').off('click').on('click', function(e) { function... });
}

Someone know how i can fix this?

allan

Can you link to a test case showing the issue, as required in the forum rules.

Thanks,
Allan

dsnap

Hey Allan,
I've got the same/similar problem.
Built this real quick, http://live.datatables.net/jipisazu/1/edit?html,output

allan

So the problem there is the same as the top FAQ. Basically a static event handler has been used, so it won't be applied to any new elements.

The way Responsive works is to take a copy of the information to be displayed. It might be possible ultimately to use the original DOM elements from the cell, but when I've tried that in the past it prove to be surprisingly complex.

So for now you would need to know that it is clone of the original data and use a delegated event handler. I realise that this will make things more complex for such a table - apologies.

Allan

dsnap

That's what I thought was going on. I was hoping there was a secret responsiveCalculationComplete event I could ride the coattail of.

allan

You could possibly use column-visibility which is triggered when Response shows or hides a column.

Allan