jQuery event handlers not firing in IE

Question

I have a list of items on a page with a set of controls to MoveUp, MoveDown and Delete.

The controls sit at the top of list hidden by default. As you mouseover an item row, I select the controls with jquery

//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
    $(this).prepend(tools);
});

This works great in Firefox .. the tools move into the current row, and the click events call the ajax functions. However, in IE6 and IE7 .. no click occurs. I tried unbinding on mouseout and rebinding on each mouseover .. to no avail.

I also looked into various reasons outside of javascript (e.g. transparent png conflicts, z-index, position:absolute) .. also no solution found.

I eventually needed to add a tools row to each item and show/hide on mouse over/out. Works just as well -- the only downer is that I have much more 'tools' markup on my page.

Does anyone know why IE ignores/drops/kills the mouse events once the objects are moved (using prepend)? And why rebinding the event afterwards also has no effect? Kept me annoyed for almost 2 hours before I gave up.

Answer 1

IE will lose events depending on how you are adding things to the DOM.

var ele = $("#itemtocopy");

$("#someotheritem").append( ele ); // Will not work and will lose events

$("#someotheritem").append( ele.clone(true) );

I would also recommend using .live() on the click events to simplify your code a little. Mouseover/out is not supported by live yet. http://docs.jquery.com/Events/live

Answer 2

i had a similar problem. trying to use .ready to load a div on the initial page load. works well in FF , but not ie7.

i have found a hack that seems to get around this.

I have load call a callback, divLoaded().

In divLoaded i check the $('#targetdiv').innerText.length < 50 or whatever you think will indicate that it didnt load. If I detect that case, i simply call the function taht loads that div again.

Oddly enough, i also add a '.' to the innerText before i recall the ajax function. It seems taht sometimes we go through 3 or 4 loops before the ajax load finally takes.

This leads me to think that document.ready works pretty flawlessly in IE7, which seems to dispel a bit of a myth that it is unreliable. What really 'seems' to be happening is that .load is a little bit flakey and doesnt work well when the page is just loaded.

I am still a bit green w/ all the jQuery stuff, so take this w/ a grain of salt. Interested to hear anyone's take on my little hypothesis.

cheers

greg

Answer 3

I just spent the whole day troubleshooting events not triggering on items appended to the DOM, (IE7, jQuery 1.4.1) and it wasn't because I needed to use live() (though, good to know, Chad), nor was it because I needed to clone the items.

It was because I was selecting anchor tags that had a "#" in them like so:

var myitem = $('a[href=#top]');

My solution was to use the "Attribute Contains Selector" like so:

var myitem = $('a[href*=top]');

Fortunately I have enough control over everything that it won't likely break in the future. This isn't technically related to appended objects, but hopefully it saves someone some time.