Question

我动态地向页面添加一个flipswitch。翻转开关可以正常但不起作用。我想绑定不会应用于动态添加的开关。如何使flipswitch工作？

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 =＆＃34; page＆＃34; 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 mobile动态添加flipswitch到页面

1 个答案: