Jquery 移动动态添加翻转开关到页面

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>

Jquery 移动动态添加翻转开关到页面

Jquery mobile dynamically add flipswitch to page

jquery-mobile

jquery-mobile-flipswitch