In IE 7/8, the "change" event does not fire when a form element is changed.

[edelgadom]

Hello,

Given this form:

    <form action="" method="get" accept-charset="utf-8">
        <select name="some_name">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
    </form>

And this div:

    <div id="log"></div>

The following code works as expected in Safari 4.0.3 and Firefox 3.5.3, but does not in IE 7 or 8:

  $("form").change(function(){
    $("#log").append("<p>The form has changed</p>");
  });

Seems like in IE, the change event is not propagated or bubbled up to the form element; therefore the code inside the change event block does not get executed.

The same behavior is present using this style of event binding:

  $("form").bind("change", function(e){ ... });

It is only when you change your selector to:

  $("form :input").change(function(){ ... });

That the change event is detected by IE. Of course, the issue with this, is that only those static input elements will be bound to these event listener. Any generated form elements will need to be bound again (so not using event bubbling anymore).

I was expecting the selector to behave the same in IE as in Firefox and Safari. I'm attaching an example. Use it on IE and Firefox please.

Thanks in advance,

Enrique

[dmethvin]

Since there is no change event on the form itself, you are anticipating that IE will bubble the change events fired by the elements it contains. The problem is that IE does not bubble the change event, contrary to what the W3C spec says. Listen for change events on the form elements directly.