.change() function not working in Chrome. Is this another bug - or what?
In my Autocomplete for city and address input, I want completed input for each input box to update a Google Map. This is executed via a .change() for city and again a .change() for the streetAddress input boxes. This works in FF15, FF16, and IE8. The Autocompleted city input does not update the map in Chrome22, but the plain input for streetAddress does fire the map update in Chrome.
When I follow the code execution in Chrome Developer Tools, it goes through the expected lines of code, goes into jQueryUI and jQuery functions and seems to cycle between jQueryUI and jQuery, and finally stops. I am not able to follow it more closely than that. I have tried .blur() instead, but it works only one time in all these browsers, so if a user changes to a second city the map does not change at all.
I see there was a bug about 6 months ago in .change() in Chrome. I'm wondering if this is another bug, and if so, is it in jQuery, Autocomplete, or Chrome?
My (simplified) relevant code is as follows.
function getCityFromGeonames(countryPick){
$("#city").autocomplete({
source: function (request, response){
//gets data from geonames.org
},
select: function (event, ui){
//sets some variables
$("#neighborhood").focus(); //moves cursor focus to neighborhood
}
}).data("autocomplete")._renderItem = function (ul, item){
//changes color of typed characters vs autcompleted characters
}
}
$( "#city" ).change( function() {
//executes code from Google to change the map
}).change().trigger('blur'); // Does not work in Chrome with or without .change().trigger('blur')
$("#streetAddress").change(function() {
//executes code from Google to change the map
$("#zipCode").focus(); //moves cursor to zipCode when user clicks on page
});
Any help would be appreciated. I've worked a couple days testing variations of this code in several browsers.