添加屬性對於克隆元素不起作用

Question

我想將輸入字段的值添加到屬性data-value的值中。這實際上工作，但我有一個按鈕，生成新的領域。因此，該值可以添加到第一個輸入字段，但不會添加到通過單擊按鈕生成的值。

<button id="another_field">Add a new field</button> 

<div class="cpt_area"> 
    <input placeholder="Type something here..." class="full_width cpt_name" type="text" name="cpt_name[]"> 
</div> 

// This will copy an input field 
$('#another_field').click(function() { 
    $('.cpt_name:first').clone().prependTo(".cpt_area").val(''); 
}); 

// This will generate a data-value attribute 
$('input').keyup(function() { 
    $(this).attr('data-value', $(this).val()); 
}); 

你可以在這裏嘗試一下：https://jsfiddle.net/e6ybk2d3/

任何想法如何，我可以解決這個問題？

Answer 1

使用clone(true)：如果您沒有設置該參數withDataAndEvents作爲

$('.cpt_name:first').clone(true)

事件處理程序將不會被克隆true，見th e doc here：https://api.jquery.com/clone/

Answer 2

$('input')只會檢測頁面加載時出現的輸入。克隆人將不會聽取關鍵事件。

而不是

$('input').keyup(function() { 
    $(this).attr('data-value', $(this).val()); 
}); 

使用

$('.cpt_area').on('keyup', 'input', function(ev){ 
    $(this).attr('data-value', $(this).val()); 
});