如何将点击事件绑定到 jQuery 中动态创建的 HTML 元素
答案:使用jQuery的on()方法
如果您尝试使用 jQuery click() 方法对动态添加到 DOM 的元素进行某些操作，它将不起作用，因为它仅将 click 事件绑定到绑定时存在的元素。 要将 click 事件绑定到所有现有和未来的元素，请使用 jQuery on() 方法。让我们看一个例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 为动态添加的元素绑定点击事件</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item <a href='javascript:void(0);' class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<p>Click the above button to dynamically add new list items. You can remove it later.</p>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
