Cloned div in JQM
Possible bug with jQuery Mobile when a div is cloned and a nested select is refreshed.
HTML
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<div data-role="page">
<div data-role="header">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<div class='repeatable'>
<select name="Test" id="0">
<option value="val1">Val 1</option>
<option value="val2">Val 2</option>
<option value="val3">Val 3</option>
<option value="val4">Val 4</option>
</select>
</div>
<a id="clone_button" href="#" ref="external" class="ui-link">clone</a>
</div><!-- /content -->
</div><!-- /page -->
JavaScript
function cloneRepeatableGroup() {
var div = $.mobile.activePage.find('.repeatable').last().clone();
div.children('.ui-select').each(function() {
var currentSelectDiv = $(this);
console.log(currentSelectDiv);
currentSelectDiv.find('select').each(function() {
console.log($(this).parent().html().match(/ *<select [^)]*select> */g, ""));
currentSelectDiv.after($(this).parent().html().match(/ *<select [^)]*select> */g, ""));
});
currentSelectDiv.remove();
});
$('#clone_button').before(div.html());
//$('#clone_button').parent().trigger('create');
}
$("#clone_button").click(function() {
cloneRepeatableGroup();
});