My code only works in Firefox. Why is this?

HTML:

<select id="selecter">
         <option>one</option>
         <option>two</option>
         <option>three</option>
   </select>

Javascript:

$(function() {
   $(document).on("mouseover", "#selecter option",function(){
            alert(1)        
    });
});

I'm curious why IE and chrome don't fire a mouseover event. See this JSFiddle: / (Works perfectly in Firefox.)

How can I get IE and Chrome to fire a mouseover event?

My code only works in Firefox. Why is this?

HTML:

<select id="selecter">
         <option>one</option>
         <option>two</option>
         <option>three</option>
   </select>

Javascript:

$(function() {
   $(document).on("mouseover", "#selecter option",function(){
            alert(1)        
    });
});

I'm curious why IE and chrome don't fire a mouseover event. See this JSFiddle: http://jsfiddle/yT6Y5/72/ (Works perfectly in Firefox.)

How can I get IE and Chrome to fire a mouseover event?

• javascript
• jquery
• html
• internet-explorer
• google-chrome

Share Improve this question Follow edited Apr 2, 2014 at 0:12 Owen Versteeg 34833 silver badges1414 bronze badges asked Feb 23, 2013 at 8:56 tradebel123tradebel123 43511 gold badge66 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The problem is that browsers render dropdowns differently. Chrome is rendering it not as an HTML ponent but as a native GUI one. That can't have hover handlers associated to it from JS.

If you want to make sure it works on all browsers either don't use a dropdown or get a script to create a dropdown that uses HTML elements

It seems, no events are actually fired when you hover over an option in IE & chrome,

At best should should bind on the change event.

$(function() {
    $("#selecter").change(function(){
            alert(1);
    });
});

maybe you should use , a different approach to bind the event

 $(function() {
    $("#selecter").mouseover(function(){
        alert(1)        
     });
  });