FlipSwitch jQuery mobile constructor

Question

I'm looking for a way to build a new FlipSwitch control inside a container: <div id="container"/>

If I run $("#container").flipswitch({ onText:"Stay", offText:"Go"}); the HTML that gets generated is:

<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all">
    <a class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit" href="#"/>
    <span class="ui-flipswitch-off"/>
    <div class="ui-flipswitch-input" id="container" tabindex="-1"/>
</div>

which doesn't contain my onText/offText labels.

Do I need to manually create the input or select HTML element inside my container or is there a better way to do this?

Thanks!

Answer 1

First create the input element that will become the flipswitch, then append it to the container div, and finally initialize the widget:

var html = '<input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">';
$("#container").append(html).find("input").flipswitch({ onText:"Stay", offText:"Go"});

DEMO