Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
800 views
in Technique[技术] by (71.8m points)

jquery - Javascript function is using the last known parameters in loop?

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

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);

        }

UPDATE SOLUTION:

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)
      });
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You are declaring the map variable without the var keyword so it's being created in the global scope, so there is only one map variable that gets it's value over-written each loop.

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);
}

Running your code inside of an IIFE (Immediately-Invoked Function Expression) will create a new scope for the code within it. This allows you to declare variables at the time of running and they will hold their value into the future (for instance they will be available to event handlers that fire in the future). Notice I used the var keyword when declaring all the variables so they are created in the current scope.

Update

You could also use $.each() to scope your code:

$.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);
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...