Event.observe 'change' event does not fire in IE

Question

The Prototype event listener that I use to change my favorite menus does not fire in IE.

Event.observe('use_billing', 'change', Checkout.getBillingData);

This works fine in Firefox (of course), but nothing happens in IE (of course). I searched this on Google for a while, but I did not find a suitable solution to this problem. I read that there are problems, but I did not find anything useful to get around the problem and make it work.

I really try to avoid using built-in event triggers because they are intrusive and make error-prone documents dirty:

<select id='use_billing' onchange="Checkout.getBillingData();">....</select>

Any ideas would be great - this is the only thing that stopped this project from beta to production.

Answer 1

I found the reason - this was not a focus problem, it turned out that I have the name of the form element and the id value is the same - I changed the id value and everything worked fine.

Answer 2

This is a common problem with IE. It does not fire events changeuntil the element loses focus.

To make sure that this is really causing your problem, try changing the menu, and then click the tab to move the focus to another item. If your callback works correctly, you will find out that there is no other problem.

, , click keydown. , , , , , ( click, change ).

Answer 3

, , . , .

, , . ( ) Firefox, eventArg.currentTarget.value

IE eventArg.srcElement.value

So for it to work in both browsers you have to use ...

var value = "";
var id = "";
if(eventArg.currentTarget){//FireFox
value = eventArg.currentTarget.value;
id = eventArg.currentTarget.id;
}
else{//IE
value = eventArg.srcElement.value;
id = eventArg.srcElement.id;
}