极客教程如何在jQuery中处理动态创建元素的事件
当我们想把任何事件绑定到一个元素时，通常我们可以直接使用on()方法绑定到每个元素的任何事件。
实例1：本实例使用jQuery on()方法动态添加段落元素。
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(document).ready(function () {
("#list li").on("click", function (event) {
$('#list').append('<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<!-- Click on this paragraph -->
<ul id="list">
<li>Click here to append !!!</li>
</ul>
</body>
</html>
输出:
这样做真的很好，但是当我们添加一个新的列表项并点击它时，什么也没有发生。这是因为之前附加的事件处理程序在文档加载时被执行。当时只有第一个列表项存在，而没有新的列表项。因此，.on()方法只应用于第一个列表项，而不是其他的。
例子2：下面的例子是用on()方法实现的。
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(document).ready(function () {
("#list").on("click",
"li", function (event) {
$('#list').append(
'<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<ul id="list">
<!-- Click on this item -->
<li>Click here to check on()!!!</li>
</ul>
</body>
</html>
输出:
例子3：下面的例子是用delegate()函数实现的。为了将事件处理程序绑定到动态创建的元素，我们将使用事件委托在点击新的列表项时，会执行同样的动作。
事件委托是一个过程，它允许我们在父元素上附加一个单一的事件监听器，它将对现在存在的或将来要添加的所有子元素起作用。on()和delegate()函数都允许我们进行事件委托。
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(document).ready(function () {
("#list").delegate("li",
"click", function (event) {
$('#list').append(
'<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<ul id="list">
<!-- Click on this item -->
<li>Click to check delegate !!!</li>
</ul>
</body>
</html>
输出:
