如何在js中动态添加事件

Question

When I get some json data I want to display them in the page:

code:

    function update(){

      for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=function(){
          alert ("id:"+data[i].id);
        }

      }
}

However,I get the error: data[i]i is not defined.

any way?

BTW,since I post this question on my phone,so I can not format the code well.l hope someone can do me a favor.

UPDATE:

    function update(){

      for(var i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        l.tindex=i;
        document.getElementById("ul_con").appendChild(l);
        l.onclick=function(){
          alert ("id:"+data[this.tindex].id);
        }

      }
}

This code works also,but I wonder why the "data" can be used when the click event occur while the "i" can not?

Answer 1

When the onclick event fires, the data[] array is out of context. You'll need to use this instead ie

l.onclick=function(){
   alert ("id:"+this.id);
}

Answer 2

When the onclick function is called, it is at a much later time than when you hooked up the event handler and the data and i values may no longer be what they were at the moment you hooked up the function so you cannot rely on them. In fact, the i value is guaranteed not to be the same because it will have advanced because of subsequent interations of the loop. The data value may or may not be valid depending upon the rest of your code.

You can freeze them for use within the event handler like this:

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=(function(mydata, index){     // define function that gets called at assignment time
            // variables mydata and index are available here in this scope
             return function() {
                alert ("id:"+mydata[index].id);
            };
       })(data, i);   // pass data and i into the inner scope
    }
}

By doing it this way, the first function(data,i) is executed at the time the onclick handler is assigned. This evaluates data and i and establishes their value for the use in the inner function via the function closure. See this writeup for a description and more examples. Since data is an array, you are not making a copy of it here (it is passed by reference) so you will have to make sure that its values are preserved until the time of the click handler (though it will not go out of scope because this closure preserves it). The value of i is copied in the function parameter so you don't have to worry about the outer loop changing the value of i.

It's a little less confusing and more easily understandable when it looks like this, but if you study the two, you can see that they are really the same thing, the first example just has an inline nameless function definition:

function processMyClick(mydata, index) {
    return function() {
        alert ("id:"+mydata[index].id);
    };
}

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.onclick=processMyClick(data, i);
    }
}

If all you need is a couple pieces of data out of that data structure, then you may want to just put it on the DOM object itself like this:

function update(){
    for(far i=0;i<data.length;i++){
        var l=document.createElement("li"); 
        document.getElementById("ul_con").appendChild(l);
        l.myId = data[i];
        l.onclick=function() {alert(this.myId);};
    }
}

When putting data on DOM objects, you do have to be careful about cleaning up appropriately to avoid potential memory leaks or circular references if you create/destroy a lot of these and run in older browsers.