Функция Javascript использует последние известные параметры в цикле?

Question

У меня есть ситуация, когда мне нужно динамически создавать кнопки, и мне нужно прикрепить событие onclick к каждой из них.Все вышеперечисленное сделано отлично.Однако при нажатии одной из кнопок вызываемая функция ie (animate (poly, map)) использует последнее известное значение poly и map в качестве параметров.Я застрял с этой проблемой с утра.Пожалуйста помоги.Спасибо

for(var k=0;k<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 += "<span class=\"animate\">";
        strVar += "<input type=\"button\"  id="+x+" name=\"animate\"  value=\"Animate\" \/>";
        strVar += "<\/span>";


        $(v).append(strVar);



        document.getElementById(x).onclick=function test(){

                animate(poly,map);

     }

     set_map(map);


    set_polyline_color(my_traversed_edge,map);

        }

ОБНОВЛЕНИЕ РЕШЕНИЕ:

i've replaced  

    document.getElementById(x).onclick=function test(){

                animate(poly,map);

     }

BY

$('#'+x).bind('click',{poly:poly,map:map}, function(event) {
             animate(event.data.poly,event.data.map)
      });

Answer 1

Вы объявляете переменную map без ключевого слова var, поэтому она создается в глобальной области видимости, поэтому существует только одна переменная map, которая получает значение, перезаписанное в каждом цикле.

for(var k=0;k<arr_altern.length;k++){
    (function (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' + div_id,
            v      = '#animater' + div_id,
            map    = create_map(div_id),
            poly   = retrieve_results_edges(bus_stops_visited, map),
            strVar = '<span class="animate"><input type="button"  id="' + x + '" name="animate"  value="Animate" /><\/span>';

        $(v).append(strVar);

        document.getElementById(x).onclick=function test(){

            animate(poly,map);

        }

        set_map(map);


        set_polyline_color(my_traversed_edge,map);
    })(k);
}

Выполнение вашего кода внутри IIFE (выражение вызова с немедленным вызовом) создаст новую область видимости для кода внутри него. Это позволяет вам объявлять переменные во время выполнения, и они сохранят свое значение в будущем (например, они будут доступны обработчикам событий, которые сработают в будущем). Обратите внимание, что я использовал ключевое слово var при объявлении всех переменных, чтобы они были созданы в текущей области.

Обновление

Вы также можете использовать $.each() для определения кода:

$.each(arr_altern, function (k, val) {
        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' + div_id,
            v      = '#animater' + div_id,
            map    = create_map(div_id),
            poly   = retrieve_results_edges(bus_stops_visited, map),
            strVar = '<span class="animate"><input type="button"  id="' + x + '" name="animate"  value="Animate" /><\/span>';

        $(v).append(strVar);

        document.getElementById(x).onclick=function test(){

            animate(poly,map);

        }

        set_map(map);


        set_polyline_color(my_traversed_edge,map);
});

Answer 2

Вы можете использовать прокси jQuery

var buttons = $("a");
for (var i = 0; i < buttons.length; i++){
  $(buttons[i]).unbind("click").click(
    $.proxy(
      function(){
        alert(this);
        return false;
      },
      i
    )
  );
}

или захватить ваши аргументы, создав новую функцию

var buttons = $("a");
for (var i = 0; i < buttons.length; i++){
  $(buttons[i]).unbind("click").click(
    function(arg){
      return function(){
        alert(arg);
        return false;
      };
    }(i)
  );
}

Просто запустите один из этих примеров в консоли firebug, чтобы увидеть эффект.*

Answer 3

Попробуйте использовать самовывоз

(function (x, poly, map) {

     document.getElementById(x).onclick=function test(){

                animate(poly,map);

     }


})(x, poly, map);