Question

我希望在页面加载时使用多个jquery移动滑块的标题，值来获得json。我可以动态生成滑块HTML以附加到页面上的Div并指定正确的值，但滑块不会滑动。我错过了什么？

HTML：

<div id="mySlider">
    </div>
    <div id="mySliderHTML" style="display: none;">
        <span>#{CompName}
            <input id='#{id}' name='#{id}' type="range" pattern="[0-9]*" min="0" max="10" data-highlight="true"
                value="#{value}" data-show-value="true" data-popup-enabled="true" />
        </span>
        <br />
</div>

使用Javascript：

$(document).ready(function () {
        $.getJSON('CompHandler.ashx', function (data) {
            if (data.length > 0) {
                var mySlider = $('#mySlider');
                $.each(data, function (index, json) {
                    var mySliderHTML = $('#mySliderHTML').html(),
                    cID = json.cid,
                    name = json.name,
                    compValue = json.value,
                    percent = compValue + "0%";
                    htmlToAppend = mySliderHTML.replace(/#\{id\}/g, cID).replace(/#\{CompName\}/g, name).replace(/#\{value\}/g, compValue).replace("width: 0%", "width: " + percent).replace("left: 0%", "left: " + percent);
                    $('#' + cID).val = compValue; // This didn't do anything.
                    mySlider.append(htmlToAppend);
                });

            }
        });
    });

Answer 1

Nvm，我刚刚阅读了更多关于滑块的jquery文档，发现我需要调用

mySlider.trigger("create");

动态地将HTML附加到Div后，Jquery Mobile Slider不会滑动

1 个答案: