title: Javascript function is using the last known parameters in loop?
body: <p>I have a situation whereby, i need to create buttons dynamically and i need to attached an onclick event to each of them. 
  All of the above is done fine. However, when one of the button is clicked, the function that is called i.e (animate(poly,map)) uses the last known value of poly and map as parameters. 
  I stuck with this problem since this morning.
  Please help. Thanks</p>
  
  <pre><code>for(var k=0;k&lt;arr_altern.length;k++){
           my_div=create_div_interchange(arr[i],1,78,visited_bus,interchange_arr,arr_altern[k],null, my_interchange_array);
  
          $('#results').append(my_div);
          var x='animate';
          var v='#animater';
          v+=div_id;
          x+=div_id;
          map=create_map(div_id);
          var poly=retrieve_results_edges(bus_stops_visited,map);
  
          var strVar="";
          strVar += "&lt;span class=\"animate\"&gt;";
          strVar += "&lt;input type=\"button\"  id="+x+" name=\"animate\"  value=\"Animate\" \/&gt;";
          strVar += "&lt;\/span&gt;";
  
  
          $(v).append(strVar);
  
  
  
          document.getElementById(x).onclick=function test(){
  
                  animate(poly,map);
  
       }
  
       set_map(map);
  
  
      set_polyline_color(my_traversed_edge,map);
  
          }
  </code></pre>
  
  <p><strong>UPDATE SOLUTION:</strong></p>
  
  <pre><code>i've replaced  
  
      document.getElementById(x).onclick=function test(){
  
                  animate(poly,map);
  
       }
  </code></pre>
  
  <p><strong>BY</strong></p>
  
  <pre><code>$('#'+x).bind('click',{poly:poly,map:map}, function(event) {
               animate(event.data.poly,event.data.map)
        });
  </code></pre>