Binding jQuery Slider nach DOM-Manipulation

Question

Ich verwende einige Schieberegler von jQuery UI. Sie funktionieren gut, wenn ich sie an "statische" HTML-divs binde, aber ich möchte sie an ein paar dynamisch geladene divs binden. Lassen Sie mich erklären dies in einigen Beispiel-Code:

<script type="text/javascript"> 
function addThing(id) 
{ 
    // retrieve some data from a json source 
    $.getJSON('/get/thing/' + id + '/', function(jsondata) 
    { 
     var newtd = '<td><div class="slider" id="sl'+id+'"></div></td>'; 
     $("#tbody_tr").append($(newtd)); 
    } 

    // method 1  
    $("#sl"+id).slider(); 
    // method 2  
    $(".slider").slider(); 
} 

addThing(1); 
</script> 

So funktioniert das, mit Ausnahme der Schieber. Ich kann das nicht herausfinden. Bitte gib mir ein paar Hinweise!

Answer 1

Sie müssen es im Rückruf und nicht in der Funktion tun. Die $("#sl"+id).slider(); passiert, bevor die Elemente der Seite hinzugefügt werden. Es ist asynchron, nicht synchron.

function addThing(id) 
{ 
    // retrieve some data from a json source 
    $.getJSON('/get/thing/' + id + '/', function(jsondata) 
    { 
     var newtd = '<td><div class="slider" id="sl'+id+'"></div></td>'; 
     $("#tbody_tr").append($(newtd)); 
     $("#sl"+id).slider(); 
    } 
} 

addThing(1);