CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorergoogle-chrome
tradebel123
tradebel123

Reputation: 435

IE and Chrome don't fire a mouseover event for <option> elements

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.net/yT6Y5/72/ (Works perfectly in Firefox.)

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

Upvotes: 4

Views: 5497

Answers (3)

loxxy
loxxy

Reputation: 13151

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);
    });
});

Upvotes: 1

PCoelho
PCoelho

Reputation: 8010

The problem is that browsers render dropdowns differently. Chrome is rendering it not as an HTML component 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

Upvotes: 4

youssDev
youssDev

Reputation: 90

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

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

Upvotes: -2

Related Questions