JavaScript set DOM object event dynamically on dynamically created DOM objects

Question

The following script:

var containerDIV = document.getElementById("sampleContainer");

for(var i = 0; i < 5; i++)
{
    var dynamicDIV = document.createElement("div");
    containerDIV.appendChild(dynamicDIV);   
    dynamicDIV.onclick = function() { alert(i); };
    dynamicDIV.innerHTML = "Row: " + i;
}

when clicking on the dynamically rows the output in the alert box will always be "5" instead of 0, 1, ..

Do anyone knows a proper way to assign the onclick event?

VisioN · Accepted Answer · 2012-12-05 15:15:07Z

1

You should use the closure power:

for (var i = 0; i < 5; i++) {
    (function(i) {
        dynamicDIV.onclick = function() {
            alert(i);
        };
    })(i);
}

DEMO: http://jsfiddle.net/zvPfZ/

answered Dec 5, 2012 at 15:15

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

steax Over a year ago

thanks it definitely works!! I still can't understand why but i hope to get it after reading the mozilla dev article :) Have a nice day!

VisioN Over a year ago

@steax Closures is one of the most important features of JavaScript. I suggest you to read about it. Good day ;)

Collectives™ on Stack Overflow

JavaScript set DOM object event dynamically on dynamically created DOM objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related