如何让点击事件工作动态生成HTML元素

Question

当添加更多的被点击链接，一个DIV是动态生成的，增加了一个额外的文本输入和添加更多链接。这动态插入添加更多链接不响应点击事件。即使每个动态插入的链接都有一个唯一的ID，并且click事件使用（）方法上的Jquery 使用“委托”绑定，但动态插入的链接在单击时添加更多字段不起作用。这里是一个jsbin，整个代码如下：

的JavaScript：

<script type="text/javascript"> 
    $(document).on("ready", function(){ 

    return $(".add_people_filter").on("click", function(event){ 

     event.preventDefault(); 

     var time = new Date().getTime(); 
     var dynamicallyCreatedDiv = document.createElement("div"); 
     dynamicallyCreatedDiv.id = time; 

     var peopleFilterContainerDiv = $("#people_filter_container"); 
     peopleFilterContainerDiv.append(dynamicallyCreatedDiv); 
     var getHtmlForDynamicDiv = $(".people_filter").html(); 
     var theNewDiv = $(dynamicallyCreatedDiv); 
     theNewDiv.append(getHtmlForDynamicDiv); 

     var AddUniqueIdToLinK = time * 2; 
     var x = time * 3; 
     $(this).attr('id', AddUniqueIdToLinK); 
     theNewDiv.find("a:last").attr('id', x); 

     return theNewDiv; 
    }); 
}); 
</script> 

的HTML：

<div id="people_filter_container"> 
    <div class="people_filter" > 
    <input type="text" name="firstname" placeholder="add name" > 
    <a href="#" data-behavior="add_people_filter" class="add_people_filter"> add more</a> 
    <br> <br> 
    </div> 

</div> 

Answer 1

其更改为：

return $("body").on("click",".add_people_filter", function(event) 
{ 
     ...... YOUR CODE  
});