重複輸入時輸入丟失值

我有一個用於我的表單字段的模板，我需要這些字段可以重複多次。重複輸入時輸入丟失值

看到這個作爲樣本案例：

<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

重複輸入時輸入丟失值

回答

相關問題