Question

I’m having a problem getting a change event to register with the following code:

var map = function(){

  function addMapTriggers(){
    $("#map_form select").change(getDataWithinBounds);
  }

 return{
  init: function(){
   getDataWithinBounds();
   addMapTriggers();
  }
 };
}();

and in a jQuery document.ready:

$(function(){
  map.init();
});

So I get my initial data, then every time I change one of the selects, I get the map data again (getDataWithinBounds sends an ajax call). Problem is, it doesn’t work, the change event is never added.

However, if, in the console I type map.init(); it does work. This is weird, I don’t understand how there is any difference whatsoever? What am I missing here? I’m testing this on Safari AND Firefox with the exact same behavior.

Answer 1

I’m so embarrassed right now and I apologize for wasting everyone’s time. Of course the above code works, what’s different about what I’m doing is that my site is using the jquery selectbox plugin, which styles the selects by creating a UL with click events to act like a select (not my choice, trust me) Unfortunately, I was calling init before applying the selectbox code, which itself alters the binding of the selects. Putting the selectbox call first, then calling map.init() completely fixed it.

Many apologies and thanks a lot (SolutionYogi in particular) for taking the time to help me out.