JQuery mouseover function firing multiple times

Question

I have been using this method for a long time to set events for entire classes (for buttons etc):

$("div.bigButton").mouseover(function() { this.style.backgroundColor = '#dfdfdf'; });

However while doing some testing I have just noticed that when moving the mouse over these objects, the function fires 3 times! This is unnoticable when changing something like backgroundColor, but if I add an alert it's very obvious.

Any ideas what I'm doing wrong? I am concerned this may have an impact on performance later on.

Thanks

EDIT: Sorry, missing "style" off was a typo

The HTML is:

<div class="bigButton">
Test</div>

Provide sufficient data to answer your question. – AppleBud Jun 11 '14 at 13:13 — AppleBud, Jun 11 '14 at 13:13
better you provide a fiddler link – Govind Singh Jun 11 '14 at 13:13 — Govind Singh, Jun 11 '14 at 13:13
isn't it `this.style.backgroundColor`? – Mr_Green Jun 11 '14 at 13:14 — Mr_Green, Jun 11 '14 at 13:14

score 8 · Answer 1 · edited Jul 22 '15 at 11:18

8

This may be occurring because of nesting in your HTML elements. The jQuery documentation has a perfect example of this at the bottom of the page (don't confuse mouseover and mouseenter), as well as an example that prevents that unwanted behavior. http://api.jquery.com/mouseover/

edited Jul 22 '15 at 11:18

Chuck Le Butt

47,570
62
203
289

answered Jun 11 '14 at 13:16

ivanjonas

599
7
19

score 4 · Answer 2 · edited Sep 15 '16 at 00:55

4

If it's a hover effect you should use .hover or .mouseenter and .mouseleave.

Also check for events bubbling from child elements that might be your problem.

Update

By trying this fiddle I can't seem to reproduce your problem, so your problem lies in your HTML/JavaScript code. Maybe you're attaching the handle three times?

edited Sep 15 '16 at 00:55

ivanjonas

599
7
19

answered Jun 11 '14 at 13:14

mpcabd

1,813
15
20

Thanks for your reply. I have tried mouseenter and it does the same. It also does it on a basic DIV with no child elements, so I think the issue may be elsewhere! – valoukh Jun 11 '14 at 13:22
I've tried your code in a [fiddle](http://jsfiddle.net/CAL8u/) and it didn't reproduce the issue, I updated my answer. – mpcabd Jun 11 '14 at 13:46
Same result here - please see my answer below :) – valoukh Jun 11 '14 at 14:24

score 3 · Accepted Answer · answered Jun 11 '14 at 13:30

I have discovered that the function that sets up the buttons was being run multiple times (each time the page content was delivered via ajax). I would have thought this would overwrite the 'mouseover' function, but it seems it was adding to it instead!

Thanks for all your help

JQuery mouseover function firing multiple times

3 Answers3

Linked