jQuery working on Firefox but not on Chrome

Question

I've been stuck with this for a couple of days now. I'm developing a website and I've been testing it on Firefox, but what is working on Firefox is not Working on Chrome or mobile browsers like Chrome, Firefox or Dolphin HD.

Here is the code in a jsFiddle: http://jsfiddle.net/5QMJQ/10/

What it does is get the data selected in the first five selects and add it to the last one. It's fine in Firefox, but in Chrome it doesn't enter in the functions. And I don't know what else to do.

$(document).ready(function () {

     console.log('1 - Working');
     // Función que va añadiendo o quitando elementos al campo "Oficial responsable"
     // del equipo local dependiendo de los campos anteriores.
     $("#equipo_local select option").click(function () {

         console.log('2 - Working');

         ...
     });
 });

console.log('1 - Working'): FF and Chrome displays this.

console.log('2 - Working'): Only Desktop FF displays this.

Thanks for the help!

Funny, because the click event didn't seem to work in Chrome a while ago (but in Firefox): http://stackoverflow.com/questions/1402227/jquery-click-event-on-select-option-element-in-chrome. I think the highest rated answer would help you too. — Felix Kling, Apr 02 '13 at 10:15

score 4 · Answer 1 · answered Apr 02 '13 at 10:16

4

I don't think click events are valid on options. Instead try .change on the select?

answered Apr 02 '13 at 10:16

mutex

7,536
8
45
66

score 2 · Accepted Answer · answered Apr 02 '13 at 10:16

I suspect it's got a lot to do with how the click event is being handled on an option element.

If you change your handler from click on the option, to change on the select, you'll find it works as desired.

$("#equipo_local select").change(function () {

http://jsfiddle.net/5QMJQ/11/

jQuery working on Firefox but not on Chrome

2 Answers2