JQUERY MOBILE клон формы с выбором и сбросом параметров

Question

Я пытаюсь клонировать форму, основанную на мобильном дизайне jquery. Проблема в том, когда выбор клонируется, потому что я не могу выбрать другие варианты. Пожалуйста, проверьте код на 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/

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>

Итак, ваш клон также скопирует сгенерированный HTML из jQueryMobile. Быстрое грязное исправление - манипулировать этим новым 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

Я бы использовал шаблонизатор (например, усы или руль) вместо клонирования.

ОБНОВИТЬ:

Пример использования 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();
...

Вот скрипка: https://jsfiddle.net/robbyn/vo598s18/