Add a new easyui-switchbutton to s ul

[kayjay]

I have this html snippet taken from one of the mobile tab demos.

Code:

<!--Second Tab-->
 <div style="padding:10px">
				<div class="panel-header tt-inner">
					<img src='images/scanner.png'/><br>P2
				</div>
        <ul id="main_list" class="m-list">
            <li>
                <span>Network</span>
                <div class="m-right"><input id="sb1" class="easyui-switchbutton" checked></div>
            </li>
            <li>
                <span>Bluetooth</span>
                <div class="m-right"><input id="sb2" class="easyui-switchbutton" checked></div>
            </li>
				</ul>			
    	</div> 

I have this js code inside the ready function:

Code:

$('#main_list').append('<li><span>NewListItem</span><div class="m-right"><input id="sb3" class="easyui-switchbutton"></div></li>');

When this loads I get a new list element but instead of an "easyui-switchbutton" I get a "text input box" instead. Should I expect this to work ror have I got it all wrong?

[stworthy]

You have to create the switchbutton after appending the elements.

Code:

$('#main_list').append('<li><span>NewListItem</span><div class="m-right"><input id="sb3" class="easyui-switchbutton"></div></li>');
$('#sb3').switchbutton();

[kayjay]

Thank you so much - that does the trick. Silly me.