javascript - jQuery Mobile: dymamically created elements don't have click events -

on jquery mobile website give user possibility add select menus on click. additional select menus appear, not work. no options shown when select menus being clicked.

here comes code:

jsfiddle: http://jsfiddle.net/ncs6u/82/

html:

<div id="select-con">     <div class="select-row">         <form class="select-form">             <select class="select-class" name="select-name"                     data-native-menu="false">                 <option value="0" data-placeholder="choose">choose</option>                 <option value="1">option 1</option>                 <option value="2" selected="selected">option 2</option>                 <option value="3">option 3</option>             </select>         </form>     </div>      <!-- raw select menu adding -->     <div id="select-row-raw" class="select-row">         <form class="select-form">             <select class="select-class" name="select-name"                     data-native-menu="false">                 <option value="0" data-placeholder="choose">choose</option>                 <option value="1">option 1</option>                 <option value="2">option 2</option>                 <option value="3">option 3</option>             </select>         </form>     </div> </div>  <button>add select</button> 

js:

$('button').on('click', function() {     $clone = $('#select-row-raw').clone();     $clone.appendto('#select-con').show(); }); 

how achieve added select menus (clones of "#select-row-raw") work?

* update *

new fiddle: jsfiddle.net/ncs6u/85

the weird thing first added select menu display of options still not work. how can problem solved?

in js try adding clone function so:

$('button').on('click', function() {     $clone = $('#select-row-raw').clone(true, true);     $clone.appendto('#select-con').show(); }); 

this clone event listeners of #select-row-raw , it's children