Question

我正在尝试为页面上的多个条目克隆表单。我正在使用jquery克隆方法。它正在工作，除非我来参加onchange活动。更改时我的onchange事件会根据选择创建复选框。这是我创建的一个额外的javascript函数。 onchange和动态复选框不能克隆表单。

这是我克隆的jquery：

<script type="text/javascript">
$(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
            Element = 'ID' + newNum + '_treatments';

        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);

        newElem.find('.label_variety').attr('for', 'ID' + newNum + '_variety');
        newElem.find('.select_variety').attr('id', 'ID' + newNum + '_variety').attr('name', 'ID' + newNum + '_variety').val('');

        newElem.find('.label_seedSize').attr('for', 'ID' + newNum + '_seedSize');
        newElem.find('.input_seedSize').attr('id', 'ID' + newNum + '_seedSize').val('');

        newElem.find('.label_treatments').attr('for', 'ID' + newNum + '_treatments');
        newElem.find('[id=slct2]').attr('id', 'ID' + newNum + '_treatments').attr('name', 'ID' + newNum + '_treatments').val([]);

        newElem.find('.label_pails').attr('for', 'ID' + newNum + '_checkboxitem');
        newElem.find('.input_pails').attr('id', 'ID' + newNum + '_variety').attr('name', 'ID' + newNum + '_variety').val('');


    // Insert the new element after the last "duplicatable" input field
        $('#entry' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        if (newNum == 5)
        $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
            {
                var num = $('.clonedInput').length;
                // how many "duplicatable" input fields we currently have
                $('#entry' + 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 Seed to Order");});
            }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr('disabled', true);
});
</script>

这是我正在使用的html表单：

<div id="wrapper">
<div class="sign-up_box">
    <form action="#" method="post" id="sign-up_area">
        <div id="entry1" class="clonedInput">
                <table>
                <tr>
                <td>
                <label class="label_variety" for="variety">Seed Variety</label>
                <select class="select_variety" name="variety" id="variety"><option value="0">[Choose]</option><?= $optionHtml2?></select>
                </td>
                </tr>
                <tr>
                <td>
                <label class="label_seedSize" for="seedSize">Seed Size</label>
                <select class="select_seedSize" name="seedSize" id="seedSize" onchange="populate(this.id, 'slct2')">
                    <option value="0">[Choose]</option>
                    <option value="MP">MP</option>
                    <option value="RP">RP</option>
                    <option value="XTRM">XTRM</option>
                </select>
                </td>
                </tr>
                <tr>
                <td>
                <label class="label_treatments" for="treatments">Treatments</label><div class="treatments" id="slct2"></div>
                </td>
                </tr>
                <tr>
                <td>
                <label class="label_pails" for="pails">Pails</label>
                <input class="input_pails" type="text" name="cases" maxlength="5" size="5" required digits>
                </td>
                </tr>     
                </table>
        </div>
        <div id="addDelButtons">
            <input type="button" id="btnAdd" value="Add Seed to Order"><input type="button" id="btnDel" value="Remove Seed from Order">
        </div>
                <table>
                <tr>
                <td>
                <input type="submit" name="reload" id="reload" value="Submit" onClick=" " />
                </td>
                </tr>
                </table>
    </form>
</div>
</div>

这是创建复选框的javascript：

    function populate(seedSize, slct2) {
        var s1 = document.getElementById(seedSize);
        var s2 = document.getElementById(slct2);
        s2.innerHTML = "";
        if (s1.value == "MP") {
            var optionArray = ["Poncho", "Kabina", "T45"];
        } else if (s1.value == "RP") {
            var optionArray = ["Poncho", "Kabina", "T45"];
        } else if (s1.value == "XTRM") {
            var optionArray = ["Poncho", "Kabina", "T20"];
    }

    for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
            var pair = optionArray[option];
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = "treatments[]";
            checkbox.value = pair;



            s2.appendChild(checkbox);

            var label = document.createElement('label')
            label.htmlFor = pair;
            label.appendChild(document.createTextNode(pair));

            s2.appendChild(label);
            s2.appendChild(document.createElement("br"));  
        }
    }
    document.getElementById('reload').disabled = false;
}

感谢您的帮助!!

Answer 1

根据API文档（https://api.jquery.com/clone/）

尝试使用withDataAndEvents布尔值

clone(true)

在将要克隆的元素的html和id中删除populate的使用。

function populate(seedSize) {
    var s1 = this;
    var s2 = s1.parentNode.querySelector('.slct2');
    s2.innerHTML = "";
    if (s1.value == "MP") {
        var optionArray = ["Poncho", "Kabina", "T45"];
    } else if (s1.value == "RP") {
        var optionArray = ["Poncho", "Kabina", "T45"];
    } else if (s1.value == "XTRM") {
        var optionArray = ["Poncho", "Kabina", "T20"];
    }
    ...
}

然后你可以调用populate，传递this作为唯一的参数。

使用onchange克隆选择

1 个答案: