JQUERY MOBILE 克隆形式 select，并重置选项

Question

我正在尝试克隆基于 jquery 移动设计的表单。问题是当 select 被克隆时，因为我无法 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 link 中的代码以尝试使用 jquery 移动设备 https://jsfiddle.net/vgacia24/1jmxjzya/3/

Answer 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/

Answer 2

我会使用模板引擎（如 Mustache or 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();
...

这是一个fiddle：https://jsfiddle.net/robbyn/vo598s18/

JQUERY MOBILE 克隆形式 select，并重置选项

JQUERY MOBILE clone form with select, and reset options

performance

jquery

jquery-mobile

jquery-mobile-button