クローンされた要素に対して属性を追加することはできません

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、を参照e doc here：https://api.jquery.com/clone/

Answer 2

$('input')は、ページが読み込まれるときに存在する入力のみを検出します。複製されたものは、keyupイベントを聞いていません。代わりに

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

使用の

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