How to call parent variable i++

Question

I have multiple buttons on a page and want them to perform similar tasks. In PHP I can manage to do so, but in JavaScript I can't seem to get it working:

for (i= 0; i<5; i++){
  $("#btn_"+i).click(function(){
    alert(i);                                 
  });
}

The alert is always 5

My PHP solution is working fine, but I want to cut back on code written on the page...

<?php
for ($i= 0; $i<5; $i++){
?>

  $("#btn_page-<?php print $i; ?>").click(function(){
    $("#btn_"+i).click(function(){
      alert("<?php print $i; ?>");                                 
    });

<?php
}
?>

if all your buttons make the same action give tham the same class and use it without for loop , ie: $('.btn').click(function(){}); — Mohamed AbdElRazek, Mar 10 '13 at 14:21

score 2 · Accepted Answer · answered Mar 10 '13 at 14:20

You need closures for that. You can pass the reference inside the event data with jQuery, too:

for(i = 0; i < 5; i++) {
    $("#btn_"+i).click({ counter: i }, function(e) {
        alert(e.data.counter);                                 
    });
}

Here's a jsFiddle.

Anujith · Answer 2 · 2013-03-10T14:40:19.680

1

Not an answer to your looping problem, but you can try this method rather than looping:

$('[id^="btn_"]').click( function(e) {
    alert(this.id.replace("btn_",""));                                 
});

Sample

edited Mar 10 '13 at 14:40

answered Mar 10 '13 at 14:26

Anujith

9,370
6
33
48

1

Other answers explain how the problem is due to variable scoping, and this answer is IMO the best approach to get the desired bahavior. Indeed, jQuery fixes in its callbacks the `this` keyword so that it refers to the calling DOM element. – Gras Double Mar 10 '13 at 14:37
1

Used this version as the best solution for my case! THNX a lot! – kloewer Mar 10 '13 at 14:41
Chose BenM's answer as the solution to my original question though... – kloewer Mar 10 '13 at 14:42

score 0 · Answer 3 · edited May 23 '17 at 11:57

This is a well-known for loop problem. You need to envelope your code in a self-executing closure.

$("#btn_" + i).click(function(i) {
     return function() {
         alert(i);
     };
}(i));

Or you can place an executing callback into the parameters like this:

$("#btn_" + i).click(callback(i));

function callback(i) {
    return function() { alert(i); };
}

All the details are explained in the duplicate.

How to call parent variable i++

3 Answers3