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