JQuery event handlers do not fire in IE

Question

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

The controls are located at the top of the list, hidden by default. When you hover over the item line, 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 fine in Firefox .. the tools jump to the current line, and click events call ajax functions. However, in IE6 and IE7 there is no click. I tried to untie with the mouse and bandage on each tip .. to no avail.

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

In the end, I needed to add a toolbar to each element and show / hide the mouse. It works just as well - the only drawback is that I have a lot more “tools” on my page.

Does anyone know why IE ignores / rolls / kills mouse events after moving objects (using prepend)? And why does re-triggering an event also have no effect? The annoyance calmed me for almost 2 hours before I gave up.

Answer 1

IE will lose events depending on how you add 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 () in click events to simplify the code a bit. Mouseover / out is not yet supported alive. http://docs.jquery.com/Events/live

Answer 2

I just spent the whole day troubleshooting, not launching the elements added to the DOM (IE7, jQuery 1.4.1), and that wasn’t because I needed to use live () (although it's good to know Chad), and not because I needed to clone the elements.

This was because I selected anchor tags that had a "#" in them:

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

My solution was to use the "Attribute Contains Selector" as follows:

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

Fortunately, I have enough control over everything that is unlikely to happen in the future. This is not related to technical relationships with added objects, but hopefully this will save some time.

Answer 3

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 found a hack that seems to get around this.

My load calls a callback, divLoaded ().

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

Oddly enough, I also add '.' on innerText before I remember the ajax function. It seems like sometimes we go through 3 or 4 cycles before finally ajax loading happens.

This makes me think that document.ready works very flawlessly in IE7, which seems to dispel a bit of the myth that it is unreliable. What really “seems” to happen is that .load is a little flakey and does not work well when the page is just loaded.

I'm still a little green with all jQuery materials, so take this with salt. Interested in anyone accepting my little hypothesis.

greetings

Greg