单击添加更多链接时,会动态生成一个div,用于添加其他文本输入和添加更多链接。此动态插入的添加更多链接不响应点击事件。尽管每个动态插入的链接都有一个唯一的 id,并且单击事件通过 Jquery on() 方法 使用“委托(delegate)”绑定(bind),但动态插入的链接在单击时无法通过添加更多字段来工作。这是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>
最佳答案
改变它:
return $("body").on("click",".add_people_filter", function(event)
{
...... YOUR CODE
});
关于javascript - 如何使点击事件与动态生成的 html 元素一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38639126/