Question

I have some div`s with same class say:

<div id="1" class="same">..</div>
<div id="2" class="same">..</div>
<div id="3" class="same">..</div>

I attach eventhandler all div :

$(".same").live({mouseenter : function{ /*code*/ },mouseout: function{ /*code*/ }})

Now my problem is when mouseenters to div (id="1") , the code for mouseenter function will executes 3 time may be because there are 3 divs with class="same" but i want it to execute only one time and without attaching the events with ids. Is this possible?

Answer 1

The event does not bind for three times. But you might get mouse enter of one div when you move to next div you get mouse out of this dive and mouseenter of other div.

Moving in to first div and then to second fires three events

1. mouseenter of first div
2. mouseout of first div

3. mouseenter of second div

   Demo on JsFiddle

I have made a little change by adding parenthesis after keyword function as script was not executing for me.

Before

$(".same").live({mouseenter : function{ /*code*/ },mouseout: function{ /*code*/ }})

After

$(".same").live({mouseenter : function(){ /*code*/ },mouseout: function(){ /*code*/ }})

You could execute this code to see what is happening

 $(".same").live(
    {
     mouseenter : 
     function()
     { 
         alert(" mouseenter >>Current Div ID = "+ this.id);
     },
     mouseout: 
     function()
     { 
         alert("mouseout >>Current Div ID = "+ this.id);
     }
    }
);​