Javascript关闭对点击事件的疑虑

Question

My JS code :-

 var ul = document.createElement("ul");
    for(var i=0; i<10; i++){
    var li= document.createElement("li");
    li.innerHTML='this is my li  '+ i+ '.';
    li.onclick = (function (){
        return (function (){
            alert(i);
        })
    })();
    ul.appendChild(li);
    }

    document.body.appendChild(ul);

Test code -- http://jsfiddle.net/VhfEh/112/

Html View :-

this is my li 0.
this is my li 1.
this is my li 2.
this is my li 3.
this is my li 4.
this is my li 5.
this is my li 6.
this is my li 7.
this is my li 8.
this is my li 9.

When I am clicking on any of the li I am getting 10.. which is the max value of i or it is i++ value..

I tried something but its not working ??

Doubts :-

• Function with in a function is not Closure in JavaScript ?

• Example I am using is the JavaScript Closure example ??

Thanks !!

Answer 1

You're really close; you just forgot to set up and use a parameter with that anonymous function:

li.onclick = (function (i) {
    return (function (){
        alert(i);
    })
})(i);

The whole point of the immediately-executed function is to give each handler a private copy of the loop variable, so you have to actually pass it in as a parameter like that.

Answer 2

You are right about needing a closure.

You have to keep the i somewhere inside the closure that is created by the function body:

li.onclick = (function (){
    var localI = i;
    return (function (){
        alert(localI);
    })
})();