Связывание слайдера 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);