Jquery append()不适用于新<a>Add</a>

时间:2012-02-29 12:14:29

标签: javascript jquery jquery-selectors

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代码

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

3 个答案:

答案 0 :(得分:3)

那是因为click只将click事件处理程序附加到现有的DOM元素,而不是将来的元素。你需要jQuery on

$(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();
  });
});

答案 1 :(得分:3)

使用on()代替click()进行事件委派:

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

答案 2 :(得分:0)

像这样使用Live: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;

});