Getting value on hover produces "undefined"

Question

This jsfiddle demonstrates a basic mockup of what I'm trying to achieve. After clicking the link, I should be able to hover over the list elements and text should be appearing on the page, but they don't. When I print the values of the strings that should be appearing, they are "undefined." Why is this so?

Here's the js below, but I recommend looking at the fiddle.

$('#link1').click(function () {
    var foolist = ["foo1", "foo2", "foo3"];

    for (var i = 0; i < foolist.length; i++) {
        var li = document.createElement('li');
        li.innerHTML = "This is a link.";
        $(li).hover(function () {
            console.log(foolist[i]);
            $('#p1').append(foolist[i]);
        },
        function () {});
        $('#ul1').append(li);
    }
});

Welcome to closure! Please read this first http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — MK Yung, Nov 10 '15 at 03:24

Jack Guy · Accepted Answer · 2015-11-13T02:12:22.453

2

You've discovered the need for something called closures! Congratulations - not many people get to see how cool they are. This is pulled from a great MSDN article - I highly recommend reading the rest of it.

The problem is that i variable no longer has the value it did when you called .hover - if you log it you'll see that i===3. Why would that be? The function that you're passing to .hover is a closure - which means it consists of the function itself and a sort of "snapshot" of the .click function's scope. You create a closure with each iteration of the loop, but they all share the same "snapshot". By the time you try to get access to i via the click event, the loop has already completed.

So how can you solve it? More closures!

function showText(i) {
   $('#p1').append(foolist[i]);
}

function makeTextCallback(i) {
   return function() {
      showText(i);
   };
}

for (var i = 0; i < foolist.length; i++) {
   $(li).hover(makeTextCallback.call(this,i));
}

This is called a "function factory". You send i to makeTextCallback which captures i within the closure that it returns.

https://jsfiddle.net/aLofhaxp/28/

edited Nov 13 '15 at 02:12

answered Nov 10 '15 at 03:21

Jack Guy

8,346
8
55
86

Thank you - I much better understand the concept now. But I revised as such and it did not work - what am I doing wrong? https://jsfiddle.net/aLofhaxp/18/ – Joon Park Nov 10 '15 at 06:04
Hey @JoonPark Park, my apologies - my example wasn't set up quite correctly. I've updated my answer and linked to a new jsfiddle. – Jack Guy Nov 10 '15 at 06:16
Works like a charm. Thank you so much. – Joon Park Nov 10 '15 at 06:30
Why does `showText(i)` need to go inside a returned function? Why can't it just be inside the named function? – 1252748 Nov 13 '15 at 02:03
@thomas Unfortunately, no. That function returning a function is what constitutes a closure, and is what allows the preservation of the iterator. I would highly recommend reading the MSDN article I linked to, if you're still confused. – Jack Guy Nov 13 '15 at 02:12

score 1 · Answer 2 · answered Nov 10 '15 at 03:34

The simple rule is to avoid any closures within loops.

Another good way is to define such things in data attributes:

$('#link1').click(function () {
    var foolist = ["foo1", "foo2", "foo3"];

    foolist.forEach(function(x) {
        $("<li/>")
            .data('list', x)
            .text("This is a link");
            .hover(fooListItemOnHover, fooListItemOnHoverOff)
            .appendTo('#ul1');
    }
});

function fooListItemOnHover() {
    var data = $(this).data('list');
    console.log(data);
    $('#p1').append(data);
}

function fooListItemOnHoverOff() {
}

This will produce elements with additional data-list attribute, which will store your custom data:

<li data-list='foo1'>This it a link</li>

Then, your script will read this data from it using jQuery data().

score 0 · Answer 3 · answered Nov 10 '15 at 03:35

Use .data() method of jQuery to attach data of any type to DOM elements.

$('#link1').click(function () {
    var foolist = ["foo1", "foo2", "foo3"];
    
    for (var i = 0; i < foolist.length; i++) {
        var $li = $("<li/>");
        $li.data("VAL", foolist[i]);
        $li.html("This is a link.");
        $($li).hover(function () {
            var value = $(this).data("VAL");
            console.log(value);
            $('#p1').append(value);
        },
        function () {});
        $('#ul1').append($li);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a id="link1" href="javascript:;">Click to show list</a>

<ul id="ul1"></ul>
<p id="p1"></p>

Getting value on hover produces "undefined"

3 Answers3