How to add click event to dynamic id

Question

I have a ul list which will be created dynamically with increasing number. I have a for loop to bind the click even to all those UL.

What i need to do is when user click on it, remove the previously selected list and add the clicked as selected.

Somehow the k value in the for loop is not correct for the selection of the increasing list, But it is correct for the click function.

I want to know why it(k) is not correct? As it is correctly binded for the click event for all 5 ul but not inside the click event.

When i console.log the k value it prints 6 for all ul. I want to know the reason. How to solve this?

CODE

jQuery(document).ready(function(){
    for(var k=1;k<=5;k++){
        jQuery("#sample"+k+" li").click(function(){
            console.log(k);
            jQuery("#sample"+k+" li.selected").removeAttr('class');//removing previous selection
            jQuery(this).addClass('selected');//adding selection for clicked one
        });
    }
});

JSFIDDLE

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Aug 26 '14 at 17:53
sorry i don't know about the question already have an answer. Should i delete the question now? — rram, Aug 26 '14 at 18:00

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

You can use jQuery event delegation to listen to an event on the parent and pass it to the child. This is the preferred method for capturing dynamically-added elements.

See: jQuery event delegation with .on (this reference)

edited May 23 '17 at 12:21

Community

1
1

answered Aug 26 '14 at 17:54

Diodeus - James MacFarlane

112,730
33
157
176

sorry i couldn't understand this delegation to me. Can you explain me Please – rram Aug 26 '14 at 18:15
Thanks +1 for your help anyway – rram Aug 26 '14 at 18:57

score 0 · Accepted Answer · answered Aug 26 '14 at 17:55

You are trying to bind the value of k in a for loop, but problem is when you are clicking the li the for loop has been finished.

You can bind each value of k with a function.

Do something like bellow

function addClick(k){
    jQuery("#sample"+k+" li").click(function(){
            console.log(k);
            jQuery("#sample"+k+" li.selected").removeAttr('class');//removing previous selection
            jQuery(this).addClass('selected');//adding selection for clicked one
        });
}

jQuery(document).ready(function(){
    for(var k=1;k<=5;k++){
        addClick(k)
    }
});

DEMO

How to add click event to dynamic id

2 Answers2