Jquery mobile dynamically add flipswitch to page

Question

I dynamically add a flipswitch to a page. The flipswitch renders ok but doesn't work. I guess the bindings are not applied to the dynamically added switch. How can I make the flipswitch work ?

The html part:

<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>

The js part: data.response.switches is a json array of switches. The switch template html is placed in the switch container with the dynamic values from the json response.

                            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);

The format function:

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

Answer 1

The problem is that your templates are within the page, so jQM is enhancing them before you are using markup. You should either move them outside of the data-role="page" div, or into your script.

Here is a demo:

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>