重复输入时输入丢失值

我有一个用于我的表单字段的模板，我需要这些字段可以重复多次。重复输入时输入丢失值

看到这个作为样本案例：

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

为什么每当我输入一些值入田时，值消失在添加新的后（即点击“添加”按钮后）？

来源

2015-05-28 Giraldi

使用$('#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")

来源

2015-05-28 08:22:13 CodingIntrigue

这奏效了。干杯! – Giraldi

只是好奇，你如何使用你建议的** DOM操作**方法？哪一个更好，更高效？ – Giraldi

所以当你有'wrapper'时，你可以使用'wrapper.prop（“id”，newId）'和其他东西'wrapper.find（“input”）.addClass（“input input-new”）等。这比将HTML替换为字符串更有效且更易于阅读。 – CodingIntrigue

这是因为输入的值没有存储在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/

来源

2015-05-28 08:22:41

我不知道你可以直接对变量进行修改。现在我知道......无论如何，当这个工作，我需要包括模板的容器（即''div＃template'）。 @ RGraham的克隆方法似乎有诀窍。尽管如此，TX的帮助！ – Giraldi

重复输入时输入丢失值

回答

相关问题