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

在DOM操作之后绑定jQuery滑块

1 个答案: