Question

我有一个表单字段的模板，我需要这些字段能够多次复制。

将此视为示例案例：

<a href='#' id="add">Add</a><br /><br />
<div id="box">
    <div id="template">
        <input type="text" name="template"></input>
        <br /><br />
    </div>
</div>

剧本：

var template = document.querySelector('#template');
var index = 1;

$('#template').remove();

$('body').on('click', '#add', function(e) {
    e.preventDefault();

    $('#box').append(template);

    var newInput = $('#box').html().replace(/template/g, 'input-'+index);

    $('#box').html(newInput);

    index++;
});

为什么每当我输入一些值进入字段时，值会在添加新值后消失（即点击“＆AD;＆＃39;按钮）？

Answer 1

您在使用$('#box').html(newInput);时替换所有HTML - 包括所有输入和值。使用clone组合复制模板和append添加到框中而不替换其内容：

$('body').on('click', '#add', function(e) {
    e.preventDefault();

    var wrapper = $("<div>");
    wrapper.append($(template).clone());

    var newInput = wrapper.html().replace(/template/g, 'input-'+index);

    $('#box').append(newInput);

    index++;
});

jsFiddle

注意：我在这里使用clone的原因是您可以正确修改新框。您不必使用html().replace，但可以使用DOM操作，例如wrapper.find("#template")

Answer 2

这是因为输入的值不会存储在html本身中。

解决问题的方法是：

$('body').on('click', '#add', function(e) {
    e.preventDefault();

    var newInput = $(template).html().replace(/template/g, 'input-'+index);

    $('#box').append(newInput);

    index++;
});

jsfiddle：http://jsfiddle.net/hkk7rx74/8/

重复时输入丢失值

2 个答案: