我试图克隆一个基于jquery移动设计的表单。 问题是克隆select时，因为我无法选择其他选项。 请查看https://jsfiddle.net/vgacia24/1jmxjzya/5/
上的代码这是代码
$(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>
请检查jsfiddle链接中的代码以尝试使用jquery mobile https://jsfiddle.net/vgacia24/1jmxjzya/3/
答案 0 :(得分：1)
使用jQuery.clone（）是个糟糕的主意，因为jQueryMobile会修改你的HTML以创建一些元素。
在我们的案例中，它取代了这个：
<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 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>
因此，您的克隆还会从jQueryMobile复制生成的HTML。一个快速的脏修复方法是操纵这个新的HTML来删除无用的东西并让jQueryMobile再次申请。
你可以这样做：
// 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();
请注意，维护此类代码非常困难。你应该找到一种不使用jQuery.clone（）的方法。
这是jsFiddle;）：https://jsfiddle.net/1jmxjzya/4/
答案 1 :(得分：0)
我会使用模板引擎（例如Mustache或Handlebars）而不是克隆。
更新：
使用把手的示例：
模板：
<script id="template" type="text/x-handlebars-template">
<ul data-role="listview" data-inset="true" id="testingDiv{{num}}" class="clonedInput" >
<h2 id="ID_{{num}}_reference" name="ID_{{num}}_reference" class="heading-reference">INGREDIENTE {{num}}</h2>
<li data-role="fieldcontain">
<form>
<select name="unidad" id="ID_{{num}}_select" 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>
</script>
JavaScript的：
$(function () {
var html = $("#template").html();
var template = Handlebars.compile(html);
$('#btnAdd').click(function () {
var num = $('.clonedInput').length + 1, // how many "duplicatable" input fields we currently have
newElem = template({num: num});
// Insert el nuevo elemento despues del ultimo campo "input" duplicado
$('#add-del-buttons').before(newElem);
// Enhance inserted element
$("#testingDiv" + num).listview().enhanceWithin();
...