输入重复时失去价值

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++;
});

http://jsfiddle.net/bedex78/hkk7rx74/7/

为什么每当我在字段中输入一些值时，添加新值时该值消失（即单击“添加”按钮后）？ p>

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/