Last active
August 29, 2015 14:22
-
-
Save simonbrent/933e552739477f4be3ab to your computer and use it in GitHub Desktop.
Fixed event handlers in table headers in IE8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" /> | |
| </head> | |
| <body> | |
| <table id="example" class="display" width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Name <a href="#">Click me!</a></th> | |
| <th>Position</th> | |
| <th>Office</th> | |
| <th>Age</th> | |
| <th>Start date</th> | |
| <th>Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Tiger Nixon</td> | |
| <td>System Architect</td> | |
| <td>Edinburgh</td> | |
| <td>61</td> | |
| <td>2011/04/25</td> | |
| <td>$320,800</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script> | |
| <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| console.log('Before adding event handler (html): ', $('#example th:first').html()); | |
| console.log('Before adding event handler (innerHTML): ', $('#example th:first')[0].innerHTML); | |
| $('#example th a').on('click', function () { alert('before'); return false; }); | |
| console.log('After adding event handler (html): ', $('#example th:first').html()); | |
| console.log('After adding event handler (innerHTML): ', $('#example th:first')[0].innerHTML); | |
| $('#example').dataTable(); | |
| $('#example th a').on('click', function () { alert('after'); return false; }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In IE8, you will see a difference between the 4th console.log output and the rest.
You will also see that clicking on the link in the Name column sorts the column, and does not alert "before" and "after".
In other browsers, all the log outputs are the same, and clicking on the link alerts "before" and "after", and does not sort the column.