DOM操作后绑定jQuery滑块

Binding jQuery slider after DOM manipulation

本文关键字：jQuery 滑块 绑定 操作 DOM      更新时间：2023-09-26

我正在使用jQuery UI中的一些滑块。当我将它们绑定到"静态"HTMLdiv上时，它们工作得很好，但是，我想将它们绑定在几个动态加载的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>

所以这是有效的，除了滑块。我似乎想不通。请给我一些建议！

您需要在回调中执行，而不是在函数中执行。$( "#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);
相关文章：