了解JavaScript列表适配器中的范围

Question

I am dynamically creating a list of buttons and appending them to a span . Each button is associated with JSON data that has been downloaded via ajax. The data is obviously working, but my jQuery click events are not getting the correct index data. That is, the data that should be associated with that cell is not - and any cell that I click will actually just correspond to the data for the last element in the list. To be clearer, here is what I have (or fiddle available here ):

• The JSON data

   var data = [{"id":0, "name":"Phil"}, {"id":1, "name":"Ed"}, {"id":2, "name":"Fred"}]; 

• The HTML

   <span id="output"></span><br> 

• The CSS

   .listButton { color: #E3A869; font: 12pt sans-serif; display: block; width: 100%; background: white; border: 1px solid #FF7F00; text-align: left; cursor: pointer; } 

• The Code

   for (var i = 0; i < data.length; i++) { var person = data[i]; var button = document.createElement('button'); button.type = 'button'; $(button).addClass('listButton'); var text = "<b>ID:</b> " + person.id + "<br>"; text = text + "<b>Name:</b> " + person.name; $(button).html(text); $(button).click(function() { alert("selected person: " + person.id);//always 2, no matter who is clicked. }); document.getElementById("output").appendChild(button); } 

• The Result

(Click any cell to see the alert "selected person: 2")

---

My first thought is that this is a scope issue - meaning that when I create a new button each time, it is updating the button for each of the other cells. My first attempt for a fix was to set jQuery data in the main for loop: $(button).data("id", person.id); , then getting it back inside the click function: $(button).data("id") . Needless to say, that did not work.

What am I doing wrong, and how can I fix it?

Answer 1

This is how just scoping works in JavaScript. Conditions like if and loops like for don't have scope, except for esoteric cases, you only have function scope.

This problem is so common among beginners, it has a special section in MDN's guide on closures .

You have no loop scope, your alert is bound to person , which at the end of the loop is the third person.

You need to "close over" the person in your event handler if you'd like each handler to react to the corresponding person.

(function(person){
    $(button).click(function() {
            alert("selected person: " + person.id);//correct value!
    });
})(person); // close over the person

We are creating a function that wraps our handler, it keeps track of the value of person that was passed to it, so the handler knows what value to run on.

An alternative approach, would be using Array.forEach instead, which would run a function over each person in the array, effectively creating scope.

This would be something like:

data.forEach(function(person){
    var button = document.createElement('button');
    button.type = 'button';
    $(button).addClass('listButton');
    var text = "<b>ID:</b> " + person.id + "<br>";
    text = text + "<b>Name:</b> " + person.name;
    $(button).html(text);
    $(button).click(function() {
        alert("selected person: " + person.id);
    });
    document.getElementById("output").appendChild(button);
});

Fiddle

Fiddle without jQuery

EDIT: It seems to me like you're trying to add elements to the screen and having trouble writing a lot of messy JavaScript, mixing jQuery and DOM methods. If you're interested, here is how I would solve this:

How I'd code it

JS:

var data = [{
    "id": 0,
    "name": "Phil"
}, {
    "id": 1,
    "name": "Ed"
}, {
    "id": 2,
    "name": "Fred"
}];


ko.applyBindings(new ViewModel(data));

function ViewModel(model){
    this.buttonList = model;
    this.showSelected = function(element){
        alert("Selected person: "+element.id);
    }
}

HTML:

<span id="output"></span>
<div data-bind="foreach: buttonList">
    <button class='listButton' data-bind="click: $root.showSelected">
        <b>ID:</b> <span data-bind="text:id"></span><br />
        <b>Name:</b> <span data-bind="text:name"></span>
    </button>
</div>

Answer 2

When you write this:

 function() {
   for (var i = 0; i < 10; i++) {
      var k = i;
   }
 }

You actually write this:

function() {
   var k, i;
   for (i=0; i<10; i++) {
      k=i;
   }
}

When you then pass the variable as a parameter to a function, you get screwed over by JavaScript passing everything by reference. An easy solution is a pattern similar to this:

  for (var i = 0 ; i < 10 ; i++) {
     (function(current) {
       // Your code here
     })(i);
  }

the function in there is an IETF with a parameter set to get the value of i the moment it is executed. You can be sure that current in there is your actual per-run value.

Your corrected code:

for (var i = 0; i < data.length; i++) {
 (function(person) {
  var button = document.createElement('button');
  button.type = 'button';
  $(button).addClass('listButton');
  var text = "<b>ID:</b> " + person.id + "<br>";
  text = text + "<b>Name:</b> " + person.name;
  $(button).html(text);
  $(button).click(function() {
    alert("selected person: " + person.id);//always 2, no matter who is clicked.
  });
  document.getElementById("output").appendChild(button);
 })(data[i]);
}