JQuery effect working in firefox; not chrome / ie

Question

Hi all,
This problem surprises me because it does not work in Chrome as well. Chrome!!
Anyways, I have 3 select boxes, A, B, C. On a page load, B and C are hidden. (This is fine in all browsers). Currently, I have an event handler attached to specific values in box A, so that if a value is clicked, B shows itself populated with results according to A. Same thing for C: if a value in B is clicked, C will show itself.
However, this "show" effect only occurs in firefox -- Chrome and IE are confused.

Any suggestions? hints? Here is some code:

$(document).ready(function() {
    $("#B").hide();
    $("#C").hide();
    $('select#A option').each(function() {
        $(this).click(function() {
               $.getJSON(stuff, callback(data));
           });

    });

});
function callback(data) {
    // alert("hi");  // This isn't working for Chrome / IE! so the callback isn't called
    $("#B").show();  // This isn't working for Chrome / IE!
};

EDIT: It Turns out, the 'select#A option' -- the 'option' tag was the buggy one. After changing my handler to "change", I was able to debug and debug till I just removed the option tag -- everything seems to work now.

Thanks,
Michael

Answer 1

I think that you might have extra closing brackets at the end of the callback function.

UPDATE:

It seems like firefox can pick the click event for the option but not IE. i don't know for chrome but it might be the same problem. Instead of listening to the click event on the option you could just use the change event to track a change in the select.

you could do the following if the change event does correspond to what you are trying to do.

$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A').each(function() {
    $(this).change(function() {
           $.getJSON(stuff, callback(data));
       });

});

}); function callback(data) {

$("#B").show();

};

Notice how i am listening to the change event on the Select itself. I hope this helps!

Answer 2

If you put an alert in your callback function does it get shown?

Answer 3

The actual problem is in the following line:

//...
$.getJSON(stuff, callback(data));
//...

You are not passing the callback function, you are actually executing the function and passing undefined since it doesn't return anything.

You should pass only the reference of the function:

//...
$.getJSON(stuff, callback);
//...

Or use an anonymous function in place:

//...
$.getJSON(stuff, function(data){
  $("#B").show(); 
});
//...

Edit: I haven't noticed about the click handler that you're trying to assign, I recommend you to use the change event on the select element, to ensure that an option has been selected:

$(document).ready(function() {
  $("#B,#C").hide();

  $('select#A').change(function() {
    $.getJSON(stuff, function(data) { $("#B").show();});
  });
});

Answer 4

Well, im facing the similar problem. A dynamic table's first row just works in Chrome but in FF all rows work. this is a jQuery click event handler.

Can anybody tell me what could be the problem ?

Thanks