新規作成時にJquery append（）が機能しない<a></a>

Question

Append（）は正常に動作しますが、最初の<a class="add">Add</a>でのみ動作します。ここでは、最新の<a class="add">Add</a>

で新しい入力フィールドを追加することはできませんが、私のコードです

$(document).ready(function(){ 
    var scntDiv = $('#add_words'); 
    $('.add').click(function() { 
     $("#add_words").append('<div class="line">Word is <input type="text" /><a class="add">Add</a></div>'); 
     return false; 
    }); 
}); 

htmlコード

clickは、既存のDOM要素に clickイベントハンドラをアタッチしているためだ

<div id="add_words"> 
    <div class="line">Word is 1<input class="input1" type="text" value="1" /><a class="add">Add</a></div> 
</div> 

Answer 1

使用このような生活：あなたはjQueryのon必要see this jsfiddle

$('.add').live("click", function(event) {  
    $("#add_words").append('<div class="line">Word is <input type="text" /><a class="add">Add</a></div>'); 
    return false; 

}）;

Answer 2

、ありません将来のもの。

$(document).ready(function() { 
    $("#add_words").on("click", ".add", function(e) { 
    // Do your append here 
    // e.delegateTarget is your <div id="add_words"> 
    $(e.delegateTarget).append('<div class="line">Word is <input type="text" /><a class="add">Add</a></div>'); 
    // Prevent default action (e.g. don't follow links) 
    e.preventDefault(); 
    }); 
}); 

Answer 3

イベント委任の代わりに、click()のための使用on()：

$('#add_words').on('click', '.add', function(){ 
    $("#add_words").append('<div class="line">Word is <input type="text" /><a class="add">Add</a></div>'); 
});