javascript - How to bind a dynamically created object to the document ready event? -

i have function dynamically creates slider element using following code:

function newdiv(){         (var count=0; count < parsefloat(sessvars.storey_count); count++)             {                var string="<br><div id='my-slider"+count+"' class='dragdealer'><div class='red-bar handle'><span id='drag-button"+count+"'>drag me</span></div></div>";                $("body").append(string);                 var slider_id ="my-slider"+count;                var drag_button_id = "drag-button"+count;                 //object gets created below                new dragdealer(slider_id,{horizontal: true,x:math.random(),animationcallback: function(x, y){                document.getelementbyid(drag_button_id).innerhtml = x.tofixed(2);             }         });     } } 

however, animationcallback function invoked everytime slider moved has embedded within function listener, , have somehow bind maybe ready event. best way make slider update when value changes? , if so, how go doing this?

all of animationcallback functions closing on same drag_button_id variable.
therefore, update last one.

you need wrap body of for loop in separate function each closure gets own variable (because javascript not have block scope).