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

Posted 2023-05-09

【中文标题】将 HTML 动态附加到 Div 后，Jquery Mobile Slider 不滑动

【英文标题】：Jquery Mobile Slider does not slide after dynamically append HTML to Div

【发布时间】：2013-12-06 10:13:06

【问题描述】：

我想在页面加载时返回一个带有多个 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);
                );

            
        );
    );

【参考方案1】：

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

mySlider.trigger("create");