点击添加更多链接后,会动态生成 div ,以添加其他文字输入和添加更多链接。动态插入添加更多链接不会响应click事件。即使每个动态插入的链接都具有唯一的ID,并且click事件通过Jquery on()方法使用“委托”绑定,但动态插入的链接在单击时添加更多字段不起作用。这是一个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>
答案 0 :(得分:1)
为此更改:
return $("body").on("click",".add_people_filter", function(event)
{
...... YOUR CODE
});