I'm trying to clone a form that is based on jquery mobile design. The problem is when the select is cloned, because I can not select other options. Please check the code at https://jsfiddle.net/vgacia24/1jmxjzya/5/
here is the code
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // the numeric ID of the new input field being added
newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('slow');// Crea un nuevo elemento usando "clone()", y manipula el ID usando el valor "newNum"
// TEXTO DIVISOR
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('INGREDIENTE ' + newNum);
// LISTA 2
newElem.find('.test-select-label2').attr('for', 'ID' + newNum + '_select');
newElem.find('.test-select2').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('');
// Insert el nuevo elemento despues del ultimo campo "input" duplicado
$('#testingDiv' + num).after(newElem);
// enable the "remove" button
$('#btnDel').attr('disabled', false);
// Cantidad limite de formularios que se puede agregar, Por ahora tiene un limite de 10
if (newNum == 10) $('#btnAdd').attr('disabled', true).prop('value', "Limite de Formulario Alcanzado");
});
$('#btnDel').click(function () {
// EN EL SISTEMA NO SE ESTA USANDO LA OPCION DE ELIMINAR
if (confirm("¿Esta seguro que desea eliminar el ULTIMO ingrediente agregado?")) {
var num = $('.clonedInput').length;
// how many "duplicatable" input fields we currently have
$('#testingDiv' + num).slideUp('slow', function () {
$(this).remove();
// if only one element remains, disable the "remove" button
if (num - 1 === 1) $('#btnDel').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "[ + ] add to this form");
});
}
return false;
// remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled', false);
});
$('#btnDel').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div data-role="fieldcontain">
<ul data-role="listview" data-inset="true" id="testingDiv1" class="clonedInput" >
<h2 id="reference" name="reference" class="heading-reference">INGREDIENTE</h2>
<li data-role="fieldcontain">
<form>
<select name="unidad" id="unidad" class="test-select2" data-native-menu="true">
<option value="">Seleccionar Unidad</option>
<option value="kg">Kg</option>
<option value="lts">Lts</option>
</select>
</form>
</li>
</ul>
<div id="add-del-buttons">
<ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
<button type="button" id="btnAdd" data-role="button" >Agregar Otro Ingrediente</button>
<button type="button" id="btnDel" data-role="button" >Eliminar Último Ingrediente</button>
</ul>
</div>
<button type="submit" id="guardarReceta" data-role="button" >Guardar</button>
</div>
</form>
Please check the code at jsfiddle link to try with jquery mobile https://jsfiddle.net/vgacia24/1jmxjzya/3/
Using jQuery.clone() is a terrible idea here because jQueryMobile will modify your HTML to create some elements.
In our case it replace this :
<select name="unidad" id="unidad" class="test-select2" data-native-menu="true">
<option value="">Seleccionar Unidad</option>
<option value="kg">Kg</option>
<option value="lts">Lts</option>
</select>
By this :
<div class="ui-select">
<div id="unidad-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span class="test-select2">Seleccionar Unidad</span>
<select name="unidad" id="unidad" class="test-select2" data-native-menu="true">
<option value="">Seleccionar Unidad</option>
<option value="kg">Kg</option>
<option value="lts">Lts</option>
</select>
</div>
</div>
So your clone also copy the generated HTML from jQueryMobile. A quick dirty fix would be to manipulate this new HTML to remove useless stuff and ask jQueryMobile to apply again.
You can do so this way :
// LISTA 2
newElem.find('.test-select-label2').attr('for', 'ID' + newNum + '_select');
var tmp = newElem.find('select').clone();
newElem.find('.ui-select').before(tmp).remove();
newElem.find('.test-select2').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('').selectmenu();
Please keep in mind it will be really difficult for you to maintain such code. You should find a way to do not use jQuery.clone().
Here is the jsFiddle ;) : https://jsfiddle.net/1jmxjzya/4/