Databases
StackOverflow2013
Postsdbo
POIE7 & 8 not fireing jQuery click events for elements appended inside a table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE7 & 8 not fireing jQuery click events for elements appended inside a table
    text
    copied!<p>I have an IE bug that I'm not sure how to fix.</p> <p>Using jQuery I'm dynamically moving a menu to appear on an element on mouseover.</p> <p>My code (simplified) looks something like this:</p> <pre><code>$j = jQuery.noConflict(); $j(document).ready(function() { //do something on the menu clicks $j('div.ico').click(function() { alert($j(this).parent().html()); }); setUpActions('#tableId', '#menuId'); }); //on mouseover set up the actions menu to appear on mouseover function setUpActions(tableSelector, menuSelector) { $j(tableSelector + ' div.test').mouseover(function() { //note that append will move the underlying //DOM element with all events from it's old //parent to the end of this one. $j(this).append($j(menuSelector).show()); }); } </code></pre> <p>This menu doesn't seem to register events correctly for the menu after it's been moved in IE7, IE8 and IE8-as-IE7 (yeah MS, that's really a 'new rendering engine' in IE8, we all believe you).</p> <p>It works as expected in everything else.</p> <p>You can see the behaviour in <strong><a href="http://keithhenry.googlepages.com/WeirdIEbug.htm" rel="noreferrer">a basic demo here</a></strong>.</p> <p>In the demo you can see two examples of the issue:</p> <ol> <li>The image behind the buttons should change on hover (done with a CSS :hover selector). It works on the first mouseover but then persists.</li> <li>The click event doesn’t fire – however with the dev tools you can manually call it and it is still subscribed.</li> </ol> <p>You can see (2) in IE8's dev tools:</p> <ol> <li>Open <a href="http://keithhenry.googlepages.com/WeirdIEbug.htm" rel="noreferrer">page</a> in IE8</li> <li>Open dev tools</li> <li>Select "Script" tab and "Console" sub-tab</li> <li>Type: <code>$j('#testFloat div.ico:first').click()</code> to manually call any subscribed events</li> <li>There will be an alert on the page </li> </ol> <p>This means that I'm <em>not</em> losing the event subscriptions, they're still there, IE's just not calling them when I click.</p> <p>Does anyone know why this bug occurs (other than just because of IE's venerable engine)?</p> <p>Is there a workaround?</p> <p>Could it be something that I'm doing wrong that just happens to work as expected in everything else?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload