过去几天我一直在努力让一些代码工作。我一直在研究这个话题，并缩小了我认为正在发生的事情的范围。我有一个程序可以根据用户操作动态创建链接。
<div id="parent><a class="delete-row" id="wow" href="javascript:void(0)">Del</a></div>
现在的问题是，与页面一起加载的初始页面加载得很好。创建的任何后续链接都不起作用，因为据我所知，仅在页面加载时才加载侦听器。这解释了为什么第一个有效，但任何后续链接在单击时都不会在 DOM 中触发。
我根据我在互联网上找到的教程尝试了下面的代码。
$(document).ready(function () {
$('.add-row').on('click', function(){
$('<a class="delete-row" href="javascript:void(0)">Del</a>').appendTo('#parent');
});
});
$(document).ready(function () {
$("#parent").on('click', 'a', function() {
console.log("Clicked.");
});
});
它无法识别父点击。我唯一想知道的是，链接都是相同的这一事实是否会阻止它们在第一个之后被识别？
预先感谢您为我指明正确的方向。我的理解是 append 函数应该在单击 add=row 类名时添加侦听器......它确实起作用......只是父块不起作用。
您动态添加的元素需要添加为具有侦听器的父元素的后代。尝试改变
.appendTo('body');
到
.appendTo('#parent');
因为#parent有听众。（身体没有听众。）
演示：
$(document).ready(function() {
$('.add-row').on('click', function() {
$('<a class="delete-row" href="javascript:void(0)">Del</a>').appendTo('#parent');
});
});
$(document).ready(function() {
$("#parent").on('click', 'a', function() {
console.log("Clicked.");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-row">add row</button>
<div id="parent"><a class=" delete-row " id="wow " href="javascript:void(0) ">Del</a></div>另一种方法是将侦听器附加到主体上。
$('body').on('click', '.delete-row', () => {
// ...
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句