javascript - 在运行时创建 JQuery Mobile slider 并设置 onchange 监听器

Question

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

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

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

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

谢谢彼得。

Answer 1

您添加 slider 的方式与您引用的示例非常相似。给定一个 ID="dynamicSliders"的 DIV 和一个将检索 slider 数组的按钮，单击按钮时:

$("#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设置 slider 的样式。

要附加更改事件，您可以使用 event delegation 。我为所有 slider 分配了一个名为 dynSlider 的类，然后将更改事件附加到容器 DIV 并将其委托(delegate)给具有 dynSlider 类的所有子元素(通过委托(delegate)，DOM 元素是否存在或将来添加并不重要因为事件在容器上被捕获):

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

Here is a full DEMO

显然，在实际应用中，您需要为 slider 分配有意义的 ID 或数据属性，以便您知道在发生更改时要更新哪些内容。