Jquery onmouseover() function on dynamic html images and span

Question

I have some images and some span text on my page. Each image has his text and those elements are added dynamicaly with javascript.

Now, I would like to show the right message when mouseover on an image is detected.

It is not easy to explain, so here is the example:

var len = article_affiliations.length;
for (var affiliation_id = 0; affiliation_id < len; affiliation_id++)
{
    $('#country_warning' + affiliation_id).mouseover(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'visible';
    }).mouseout(function () {
        document.getElementById('country_warning_message' + affiliation_id)
            .style.visibility = 'hidden';
    }); 
}

The problem is that when the onmouseover function will be called, the affiliation_id will have the maximum value and the message will be shown near the last image, and not near the clicked one.

Thank you very much for your help.

Hi Ana, as Musa mentions you need to work with closures in your for-loop. There's a great SO post explaining your problem and the solution: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — T. Junghans, Jul 19 '12 at 20:23

score 3 · Accepted Answer · answered Jul 19 '12 at 15:02

Closure should do the trick:

for(var affiliation_id=0; affiliation_id<article_affiliations.length; affiliation_id++) {
    (function(i){
         $('#country_warning'+i).mouseover(function() {
              $('#country_warning_message'+i).css('visibility','visible');
         }).mouseout(function(){
              $('#country_warning_message'+i).css('visibility','hidden');
         });
    })(affiliation_id);
}

score 1 · Answer 2 · answered Jul 19 '12 at 15:03

You'll need to bind your for loop in a closure for this to work. This way, all indices of #country_warning_i will be affected.

$(function () {
    $.each(article_affiliations, function (i, v) {
        $('#country_warning' + i).mouseover(function (affiliation_id, affiliation_iddddd) {
            $('country_warning_message' + i).style.visibility = 'visible';
        }).mouseout(function (i, affiliation_iddddd) {
            $('country_warning_message' + i).style.visibility = 'hidden';
        });
    });
});

Enjoy and good luck!

score 0 · Answer 3 · answered Jul 19 '12 at 15:08

You shouldn't do it with a loop that will just go through everyone of your elements. The best way of doing something like this is using the 'event.target'(built in jQuery) and 'this' objects.

Instead attach a mouseover event handler to the parent of your . The best is if your markup looks something like this:

<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>
<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>
<div class="item">
 <img src="someimage.jpg" />
 <span>some text</span>
</div>

That way you can use a script similar to this one:

$('.item').on('mouseover', function() {
 $(this).find('span').show();
});

This will search for a span (every span) inside the element you attached the mouseover event to (for this ex the ).

Another way is to use simple css like this:

span {
 visibility: hidden;
}
item:hover span {
 visibility: visible;
}

This is an extremely simple solution and works beautifully, but unfortunately IE6 doesn't support hover on elements different from .

Jquery onmouseover() function on dynamic html images and span

3 Answers3