Jquery .change isn't working in Chrome

问题:

form some reason this seems to be working fine in FF but not in Chrome. I have tried wrapping in $(window).load( function() {...}); and even removing all other Javascript on the page (other then the Jquery Form Wizard plugin.

 $('#state').change(function() {
            var state = $("#state").val();
            if (state === "CA" || state === "NV" || state === "OR" || state === "WA" || state === "AZ") {
                $("#first .ins_link_next").val("insurance_type");
                }
                else {
                $("#first .ins_link_next").val("out-of-area");

                }
    });

The page can be viewed at http://173.45.237.55/qrf/

Any help is much appreciated!

回答1:

You have a onKeyup handler in the input element which sets the input value upper case. This actually detached the event handler (in Chrome). To fix this, one solution is to move the onKeyup function into the change function:

$('#statecode').change(function() {
        this.value=this.value.toUpperCase();
        var state = $("#statecode").val();
        if (state === "CA" || state === "NV" || state === "OR" || state === "WA" || state === "AZ") {
            $("#first .ins_link_next").val("insurance_type");
            }
            else {
            $("#first .ins_link_next").val("out-of-area");

            }
});

Also, you do not need $(window).load() to wrap your function inside $(document).ready().

回答2:

remove the $(window).load( function() { around your function, that can only damage stuff.

there is a lot "$(function () {...", it can be a cause, but I doubt it.

Point is, the script works... sometimes. more often when you delete the value.

Actually. there is 2 #state change handler, look for:

$(function() {
    $('#state').change(function() {
            $("#ins_type").val($('#ins_type')[0].defaultValue);
    });
});

and that's the problem both execute, and the result is random. delete that nagging little one, and enjoy ;)

回答3:

roselan is right, you don't need a $(window).load() inside your $(document).ready()

In the Chrome console, I disabled the keyup handler and it worked. You may just want to move the toUpperCase() code into the change handler.

This jsfiddle boils your problem down further: http://jsfiddle.net/G3CMH/ When you change the field value in a keyup event, the change event doesn't get fired on blur.