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