바인딩 jQuery를 슬라이더 DOM 조작

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