在运行时创建 JQuery Mobile 滑块并设置 onchange 监听器答案

【问题标题】：Create JQuery Mobile slider at runtime and set onchange listener在运行时创建 JQuery Mobile 滑块并设置 onchange 监听器
【发布时间】：2014-07-08 19:02:30
【问题描述】：

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

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

我最好使用 Jquery Mobile，因为我已经将它用于其他视觉元素，但如果不可能，我会感谢任何其他可能性。

编辑： 以及如何在我尝试过的 onchange 侦听器中引用数组的索引 ($(this).id()) 但这会抛出：“TypeError undefined is not a function”。

谢谢彼得。

【问题讨论】：

对于索引或 ID，您需要以某种方式将其包含在滑块中。一种方法是使用数据属性 (api.jquery.com/data/#data-html5)。这是一个更新的小提琴，它从数据属性存储和检索 id（您可以只存储索引）：jsfiddle.net/ezanker/HuDb2/3
thx: 但是我怎样才能检索到对应 id 的数组元素呢？这是数据绑定最有效的方式吗？我真的从 android-native 切换过来，在那里我习惯于为 ui 绑定编写适配器。是否有 javascript 的等价物。
有类似knockout (knockoutjs.com) 的库用于绑定。对于这么简单的事情，您可以使用数组索引而不是 id：jsfiddle.net/ezanker/HuDb2/13。如果您使用 ID，您将迭代数组，直到找到匹配的对象。

标签： javascript jquery html jquery-mobile

【解决方案1】：

您添加的滑块很像您引用的示例。给定一个 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();    
});

对于这个例子，我硬编码了数组而不是 AJAX 调用，剩下的就是你在 AJAX 调用返回时要做的事情。最后的 enhanceWithin() 告诉 jQM 设置滑块的样式。

要附加更改事件，请使用 event delegation。我已经为所有滑块分配了一个名为 dynSlider 的类，然后将更改事件附加到容器 DIV 并将其委托给具有 dynSlider 类的所有子元素（通过委托，DOM 元素是否存在或将来添加都无关紧要当事件被容器捕获时）：

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

这是一个完整的DEMO

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

【讨论】：