Javascript 在运行时创建JQuery移动滑块并设置onchange侦听器

在我的应用程序中，我通过WebSocket接收数据，根据这些数据，我想在我的页面内容中附加一些滑块：。 它是我接收的一个对象数组，对于每个对象，我要创建具有最大值、最小值和当前值的相应滑块。此外，如果用户更改了值，我希望每个滑块都有一个on-change侦听器，以便通过WebSocket将值发送回

我已经偶然发现了这一点。但是这个解决方案似乎并不合适，因为元素应该在运行时创建，而不是在第一次加载页面时创建。此外，我不知道如何优雅地设置onchange侦听器

我更愿意使用Jquery Mobile，因为我已经将其用于其他视觉元素，但如果不可能，我将感谢其他任何可能性

编辑： 如何在onchange侦听器中引用数组的索引我尝试了$this.id，但这抛出：TypeError undefined不是一个函数

---

谢谢Peter。

您添加的滑块与您引用的示例非常相似。给定ID为dynamicSliders的DIV和检索滑块数组的按钮，单击按钮：

$("#btnAddSliders").on("click", function(){
    var mySliders = [
        { value: 20, min: 0, max: 100},
        { value: 30, min: 0, max: 100},
        { value: 50, min: 0, max: 100}        
    ];

    var html = '';
    for (var i=0; i < mySliders.length; i++){
        html += '<input class="dynSlider" type="range" name="slider"' + i + ' id="slider"' + i + ' value="' + mySliders[i].value + '" min="' + mySliders[i].min + '" max="' + mySliders[i].max  + '"  />';
    }

    $("#dynamicSliders").empty().append(html).enhanceWithin();    
});

这是一份完整的

---

显然，在您的真实应用程序中，您需要为滑块分配有意义的完整ID或数据属性，以便在进行更改时知道要更新什么。

对于索引或ID，您需要以某种方式将其包含在滑块中。一种方法是使用数据属性。这是一个更新的fiddle，它存储和检索数据属性中的id。您可以只存储索引：thx：但是我如何检索对应id的数组元素呢？这是数据绑定最有效的方法吗？我实际上是从android native切换过来的，在那里我被用来为ui绑定编写适配器。javascript是否有一个等价物。绑定有类似于knockout的库。对于这种简单的情况，可以使用数组索引而不是id:。如果您使用ID，您将迭代数组，直到找到匹配的对象。

$("#dynamicSliders").on("change", ".dynSlider", function(){
    alert($(this).val());
});