jquery mobile动态添加flipswitch到页面

Question

我动态地将翻转开关添加到页面。翻转开关渲染正常，但不起作用。我猜绑定不适用于动态添加的开关。如何使翻转开关工作？

html部分：

<div data-role="page" id="switches">
    <div role="main" class="ui-content">
        <h2>Switches</h2>
        <div id="switchContainer"></div>
        <div id="switchOffTemplate" class="template1">
            <div class='ui-field-contain'>
                <label>{0}</label>
                <input type='checkbox' class='switch' data-id='{1}' data-role="flipswitch" />
            </div>
        </div>
        <div id="switchOnTemplate" class="template1">
            <div class='ui-field-contain'>
                <label>{0}</label>
                <input type='checkbox' class='switch' data-id='{1}' data-role="flipswitch" checked="" />
            </div>
        </div>
    </div>
</div>

js部分： data.response.switches 是一个 json 开关数组。开关模板 html 与来自 json 响应的动态值一起放置在开关容器中。

                            var html = "";
                        for (var i in data.response.switches) {
                            var _switch = data.response.switches[i];
                            if (_switch.type == "switch") {
                                if (_switch.status == "on") {
                                    html += $("#switchOnTemplate").html().format(_switch.name, _switch.id);
                                } else {
                                    html += $("#switchOffTemplate").html().format(_switch.name, _switch.id);
                                }
                            }
                        }
                        $("#switchContainer").html(html);

格式化函数：

String.prototype.format = function () {
            var args = arguments;
            return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; });
        };

Answer 1

问题在于您的模板在页面内，因此 jQM 在您使用标记之前对它们进行了增强。您应该将它们移到 data-role="page" div 之外，或者移到您的脚本中。

这是一个演示：

http://jsfiddle.net/mf1bco1m/

<div id="switchOffTemplate" class="template1">
    <div class='ui-field-contain'>
        <label for='id{1}'>{0}</label>
        <input id='id{1}' name='id{1}' type='checkbox' class='switch' data-id='{1}' data-role="flipswitch" />
    </div>
</div>
<div id="switchOnTemplate" class="template1">
    <div class='ui-field-contain'>
        <label for='id{1}'>{0}</label>
        <input id='id{1}' name='id{1}' type='checkbox' class='switch' data-id='{1}' data-role="flipswitch" checked="" />
    </div>
</div>
<div data-role="page" id="switches">
    <div role="main" class="ui-content">
         <h2>Switches</h2>

        <div id="switchContainer"></div>
    </div>
</div>