Fixed Header 3, IE 11 in 8 mode, loss of Events, JQuery selector fun

ThomD

This is an observation more than a question.

I tried setting this up in the DataTables live, but that is still pointing to FH2.x

Using IE 11, in IE8 mode (I don't get control of the web server headers to fix this), I noticed that an event tied to a TD in the table is lost for certain jquery selectors when FH kicks in and sticks to the top of the page.

I have three places where I apply on click events, once for free text field editing, once for a radio button edit and once for to expand the child information display. Depending on the jQuery selector used to apply the onClick event, the event will stop working when I scroll down far enough to trigger the fixed header.

This stops working

//make some cells editable - this is for radio fields       
$('#example').on( 'click','tbody td.dt-edit-radio', function (e) {
    do something...         
});

This stops working

//this is for text entry fields - the class is set 
//during column setup to identify editable fields

$('#example').on( 'click', 'td.dt-edit', function (e) {
    do something...
} );

This continues to work

$('#example tbody').on('click', 'td.details-control', function () {
  do something  ...

} );

If I force emulation to IE9, it works correctly in all cases. I don't know if it is a Jquery issue or a FH header issue, but I figured I'd share what I discovered.

ThomD

And yes, you might ask, why an I using such sloppy selectors (e.g why is the tbody even in there?). The answer is that I was hacking away in DEV and sort of lost track of work in progress. Moving all the selectors to the $() section really is the best approach:

$('#example td.dt-edit').on( 'click','' , function (e) {
    do something....
}

allan

How very bizarre. Thanks for letting me know about this. i'll try to take a look into it - although it might be a couple of weeks before I get a chance to do so now.

Allan