Why does jQuery fail to attach a mouseover handler to a Flash object?

Question

For some reason, jQuery (1.6.2) fails to attach a mouseover handler to a Flash object.

Amusingly, getElementById().onmouseover = ... works as expected.

// fail
$('#content-banner').mouseover(function () {alert(1)});
// success
document.getElementById("content-banner").onmouseover = function (evt) { alert(3); };

See the live example at jsFiddle for details.

What prevents jQuery from attaching the handler?

---

Update

A quick fix would be to use live() as suggested by ShankarSangoli. However the question still remains. Why does jQuery fail to attach the handler?

Answer 1

jQuery does not support data() on <applet>, <embed>, and <object>. Since jQuery's event handler stack depends on data() to work, thus calling mouseover() on an object would fail.

So, as long as you don't use jQuery's event handing you would do fine:

var banner = $('#content-banner');
banner.live ( 'mouseover', ... ); // works, becuse live hooks to document not to banner
banner[0].onmouseover = ... ; // works
banner[0].addEventListener('mouseover', ... , false); // also works

If you dig into the code you can see that there is an exception for objects with classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000', which is Flash, however classid only works for IE. So, the short answer is avoid using jQuery events on objects.

Answer 2

Use jQuery live. Since the flash is initialized after the page is loaded so it is not able to find the element. Working demo

---

Update

Reiterating Sheepy's answer: jQuery maintains the event handlers in data of the dom element but since it does not support data() on the events are never attached. The alternative is to use live which will attach the event on the root document but will work as expected.