CODEWITHSUNDEEP
javascriptjqueryhtml
Louis93
Louis93

Reputation: 3923

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

I have a function that dynamically creates a slider element using the following code: 

function NewDiv(){
        for (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, the animationCallback function which is invoked everytime the slider is moved has to be embedded within a function listener, and I have to somehow bind it to maybe the ready event. Is this the best way to make the slider update when its value changes? And if so, how do I go about doing this?

Upvotes: 1

Views: 167

Answers (1)

SLaks
SLaks

Reputation: 887547

All of your animationCallback functions are closing over the same drag_button_id variable.
Therefore, they all update the last one.

You need to wrap the body of the for loop in a separate function so that each closure gets its own variable (because Javascript does not have block scope).

Upvotes: 1

Related Questions