DOM操作後のjQueryスライダーのバインド

Question

jQuery UIのスライダーを使用しています。静的なHTML divでバインドするとうまく動作しますが、ダイナミックに読み込まれたdivにバインドしたいのです。

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

これは、スライダを除いて、これを説明します。 私はこれを理解できないようです。私にいくつかの指摘をしてください！

Answer 1

コールバックではなく、関数内で行う必要があります。要素がページに追加される前に$("#sl"+id).slider(); が起きています。これは非同期であり、同期ではありません。

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