Bind jquery mouseover dynamically

Question

Hi I need some help with jquery; I've this HTML

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<label id="schedId"></label>

and I want to show in the label the div id where mouse is over. I tried with this:

for(var i = 1; i < 4; i++)
{
    $('#' + i.toString()).bind('mouseover', function () { 
        $("#schedId").text(i.toString());
    });
    $('#' + i.toString()).bind('mouseout', function () { 
        $("#schedId").text("");
    });
}

but I read always '4' in the label. Could you help me please? Thanks in advance.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, Jun 04 '14 at 09:16

score 0 · Answer 1 · answered Jun 04 '14 at 09:21

Add a class of element to each div,

And you can do something like this:

$(".element").hover(
    function () {
        var id = $(this).attr("id");
        $("#schedId").text(id);
    }, function () {
        // mouseout code here 
    }
);

JSFiddle Demo

Bind jquery mouseover dynamically

1 Answers1