I have an IE bug that I'm not sure how to fix.
Using jQuery I'm dynamically moving a menu to appear on an element on mouseover.
My code (simplified) looks something like this:
$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());
});
}
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).
It works as expected in everything else.
You can see the behaviour in a basic demo here.
In the demo you can see two examples of the issue:
- The image behind the buttons should change on hover (done with a CSS :hover selector). It works on the first mouseover but then persists.
- The click event doesn’t fire – however with the dev tools you can manually call it and it is still subscribed.
You can see (2) in IE8's dev tools:
- Open page in IE8
- Open dev tools
- Select "Script" tab and "Console" sub-tab
- Type:
$j('#testFloat div.ico:first').click()
to manually call any subscribed events - There will be an alert on the page
This means that I'm not losing the event subscriptions, they're still there, IE's just not calling them when I click.
Does anyone know why this bug occurs (other than just because of IE's venerable engine)?
Is there a workaround?
Could it be something that I'm doing wrong that just happens to work as expected in everything else?