views:

276

answers:

2

I've done a good amount of research on this and found a bunch of reported problems and solutions but the general consensus seems that all change problems in IE6 were fixed in jQuery 1.4.2.

I'm having an issue where a change event is not firing in jQuery 1.4.2, but it did fire successfully in jQuery 1.3.2. This is in IE6.

I'm about to submit a bug for this, but for my sanity I wanted to post it here first to see if there's something dumb I'm missing. I don't understand why this is working this way...

<HTML>
<HEAD>
<TITLE>jQuery 1.4.2 Problem </TITLE>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
    $(document).ready( function() {
        $("#firstBox").change(function() {
            alert("CHANGE");
        });

        // ONLOAD of document autofocus into the first element...
        $("form").find(":input:visible:first").focus()
    });
</script>
</HEAD>

<BODY>
<form>

<select id="firstBox">
<option value="" selected="selected">--</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<br><br>

<input size="10" id="secondBox">

</form>
</BODY>
</HTML>

Simple enough, right? Onload of the page, give the first element focus. Onchange of the first element, alert.

If you use the mouse, it works as expected. The page loads, the focus is in the drop down, you change the option, you get the alert.

The problem is if you use the keyboard. The page loads, the focus is in the drop down, you press the down arrow. The option changes. Tab off the field, no alert. Weird. To make it even weirder, if you tab back into the field and change it again (all using the keyboard), the change event DOES fire after tab out this time.

Any ideas?

+1  A: 

I decided to apply this fix and it works:

$(function() {
    $("select").keyup(function () {
        $(this).triggerHandler("change")
    });
});

Reason is our app has been using IE6 for a while and the users are used to select boxes firing changes (fields are hidden/shown) immediately. This accomplishes that.

Thanks for the suggestions

macca1
A: 

I have a problem where the following code is not working until I change the value of the input a second time.

$("#General_Value").change(function () {
    $(this).removeClass("parsedValue");
});

I'm not sure why but I think some other code (.Net MVC2 client validation scripts) is interfering and stopping the chain of events. I decided to test plain old javascript and it works!

var value = document.getElementById("General_Value");
value.onchange = function () {
    $(this).removeClass("parsedValue");
};

I don't like to mix jQuery code and pure javascript but this is the only way I'm getting it to work.

Hope it helps someone else!

Andreas