Create click event to programmatically created div

Question

I am trying to create divs that appear at real time (using jQuery and XML). After you click that div I want that the user will get redirected to a URL depending on the div he clicked. the divs are created in for loop and it works fine. My problem is that each div gets the last value of i which is 5.

for(i=0; i<5;i++){
    var div= document.createElement("div");
    div.id="conv"+i;
    div.innerHTML=conv[i].childNodes[0].nodeValue;
    document.getElementById("conv").appendChild(div);

    $("#conv"+i).click(function(){

        alert(this.id);
        var form= document.createElement("form");
        form.setAttribute("method","post")
        form.setAttribute("action","watch_conv.php");
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", "chat_room");
        hiddenField.setAttribute("value",chat_room[i].childNodes[0].nodeValue);
        form.appendChild(hiddenField)
        document.body.appendChild(form);
        //form.submit();
        alert(i);
    });
    $("#conv"+i).animate({opacity:"show"});
}

user3553031 · Accepted Answer · 2014-06-28 09:57:26Z

2

Keep in mind that your callback will run after the original loop completes. So at the point that your alert() runs, i will be 5. If you want to use the original value of i with which the div was created inside your callback, you'll need to obtain it some other way, such as parsing it out of the id or retrieving it from a custom attribute.

answered Jun 28, 2014 at 9:57

user3553031

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

Comments

David Fang · Accepted Answer · 2014-06-28 09:59:43Z

0

The problem is that the 'i' variable is changed because you are using a for loop, which increases it. So instead of getting i, retrieve the number by using

alert(this.id.replace('conv', ''))

answered Jun 28, 2014 at 9:59

David Fang

1,7871 gold badge14 silver badges19 bronze badges

Comments

Marius · Accepted Answer · 2014-06-28 10:01:18Z

0

That's standard behaviour for javascript. In order to make the value of i stick around in each iteration of the loop, you'll need to use a closure :

$('something').click((function(i) {
    return function(e)
    {
        // now you will have access to variable "i" the way you'd normally expect
        alert('clicked on ' + i);
    }
})(i));

answered Jun 28, 2014 at 10:01

Marius

4,0065 gold badges42 silver badges54 bronze badges

2 Comments

misha312 Over a year ago

Ok I think this is what I am looking for. But what is it a closure?

Marius Over a year ago

A closure, or an inner function remembers the variables of its parent function at the time of execution. Basically in the example above you create an anonymous inner function and immediately execute it, thus capturing all the values of its parent vars (in this case we only need i though). So now it does not matter that the loop has already completed, you'll have the "i" of each iteration in the child function. Try googling closures for more detailed explanations as it might take some time and a few more articles to understand them.

Collectives™ on Stack Overflow

Create click event to programmatically created div

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related