JQuery click event inside for

Question

I really don´t know what is happening to me..

The code is like:

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
}

I´m trying to bind the click event for each button which displays the tours name, but is always displaying the last tour name whichever the button I'm clicking.

What am I doing wrong?

Thanks!

That is because the loop is complete when you click the button. Do you want to append new buttons to the document? — Jay Blanchard
– Jay Blanchard, Commented Feb 13, 2013 at 13:39

nbrooks · Accepted Answer · 2013-02-13 13:45:27Z

1

You need to wrap the click handler in a closure to 'close-over' the value of the variable name before the for-loop moves on.

This is because the handler isn't actually executed until you click on it, so otherwise it will simply use the current value of name at that time (whatever the last value in the loop was).

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    (function(n) {
        $tourButton.click(function() {
            alert(n);
        });
    })(name)
}

edited Feb 13, 2013 at 13:45

answered Feb 13, 2013 at 13:39

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

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

Comments

fmsf · Accepted Answer · 2013-02-13 13:38:34Z

0

When the click is triggered j will have value tours.length. You can lock the loop value, as well as the rest of the variables through closures.

for (var j=0; j<tours.length; j++){
  (function(){ 
    var currentJValue = j;
    var name = tours[currentJValue].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
  })();
}

answered Feb 13, 2013 at 13:38

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

Comments

MG_Bautista · Accepted Answer · 2013-02-13 13:42:18Z

0

Try this...

$('.div.button-inside ').on('click',function() {
    alert($(this).text());
}

answered Feb 13, 2013 at 13:42

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

Comments

bipen · Accepted Answer · 2013-02-13 13:44:39Z

0

no need to call click event inside loop..append the dynamically created button and call it outside the loop and use on delegate event

try this

 $(document).on('click','div.button-inside',function() {
    alert($(this).text());
}

you can go through the link if you want to read more about on delegate events...

edited Feb 13, 2013 at 13:44

answered Feb 13, 2013 at 13:39

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

JQuery click event inside for

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related