本文旨在解决jQuery动态创建元素后事件监听器失效的问题。我们将深入探讨原因，并提供使用事件委托机制的有效解决方案，确保动态添加的元素也能响应事件，从而构建更灵活、更具交互性的Web应用。
在jQuery中，直接使用$(selector).on(event, handler)绑定事件，只会对页面加载时已经存在的元素生效。对于通过JavaScript动态添加的元素，这种方式绑定的事件将不会生效。 这是因为jQuery在绑定事件时，只会在当前匹配选择器的元素上绑定，而不会“监听”未来可能出现的元素。
问题分析
考虑以下场景：一个to-do list应用，用户点击"+"按钮动态添加新的任务项，每个任务项包含一个删除按钮（.fa-trash）。如果使用以下代码绑定删除按钮的点击事件，新添加的任务项的删除按钮将无法正常工作：
$('.fa-trash').on("click", function(){
$(this).parent().remove();
});这段代码在页面加载时，只会找到已经存在的.fa-trash元素并绑定点击事件。当用户点击"+"按钮添加新的任务项时，新生成的.fa-trash元素并没有被绑定事件，因此点击无效。
解决方案：事件委托
解决这个问题的关键在于使用事件委托。事件委托的核心思想是：将事件监听器绑定到一个静态的父元素上，然后利用事件冒泡机制，监听子元素（包括动态添加的子元素）的事件。
jQuery提供了.on()方法的另一种用法，可以实现事件委托：
$(staticParentElement).on(event, selector, handler);
- staticParentElement: 静态父元素的选择器。
- event: 事件类型（例如：click）。
- selector: 目标子元素的选择器（例如：.fa-trash）。
- handler: 事件处理函数。
当事件发生在目标子元素上时，事件会沿着DOM树向上冒泡，直到到达静态父元素。静态父元素上的事件监听器会检查事件的目标元素是否匹配指定的selector。如果匹配，则执行事件处理函数。
示例代码：
假设所有.fa-trash元素都在一个<div>元素内，该<div>元素的id为todo-container，那么可以使用以下代码实现事件委托：
$(document).ready(function(){
// ... 其他代码 ...
$('#todo-container').on("click", '.fa-trash', function(){
$(this).parent().remove();
});
// ... 其他代码 ...
});在这个例子中，我们将点击事件监听器绑定到了id为todo-container的<div>元素上。当用户点击任何一个.fa-trash元素时，事件会冒泡到#todo-container，jQuery会检查事件的目标元素是否是.fa-trash。如果是，则执行删除任务项的函数。
更佳实践：
虽然将事件监听器绑定到document上也能实现事件委托，但效率较低。因为所有的事件都会冒泡到document，然后才进行选择器匹配。因此，最佳实践是将事件监听器绑定到离目标子元素最近的静态父元素上。
完整示例
以下是一个完整的示例，展示如何使用事件委托来解决动态添加元素事件失效的问题：
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.row {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.checkbox {
margin-right: 10px;
}
textarea {
flex-grow: 1;
resize: none;
overflow: hidden;
border: 1px solid #ccc;
}
.fa-trash {
cursor: pointer;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="todo-container">
<div class="row">
<input type="checkbox" class="checkbox">
<textarea placeholder="Example task....." rows="1"></textarea>
<i class="fa-sharp fa-solid fa-trash"></i>
</div>
<div class="end">
<i class="fa-solid fa-plus" id="add-button"></i>
</div>
</div>
<script>
$(document).ready(function(){
let text = $("textarea");
text.on('input', function(element){
expandTextArea(element.currentTarget);
});
// 事件委托
$('#todo-container').on("click", '.fa-trash', function(){
$(this).parent().remove();
});
$('#add-button').on("click", function(){
let newrow = $('<div></div>')
.addClass('row');
let newcheckBox = $('<input>')
.attr('type', 'checkbox')
.addClass('checkbox')
.appendTo(newrow);
let newtext = $('<textarea></textarea>')
.attr('placeholder', 'Example task.....')
.attr('rows', '1')
.appendTo(newrow);
let newtrash = $('<i></i>')
.addClass('fa-sharp fa-solid fa-trash')
.appendTo(newrow);
newrow.append(newtrash);
$("#todo-container .end").before(newrow);
// 动态添加textarea的事件
newtext.on('input', function(element){
expandTextArea(element.currentTarget);
});
});
});
function expandTextArea(element){
element.style.height = "";
element.style.height = element.scrollHeight + "px";
}
</script>
</body>
</html>总结
当使用jQuery动态添加元素时，直接绑定事件会导致事件失效。解决这个问题的关键是使用事件委托。通过将事件监听器绑定到静态父元素上，可以确保动态添加的子元素也能响应事件。在选择静态父元素时，应选择离目标子元素最近的静态父元素，以提高性能。 使用事件委托不仅解决了动态添加元素事件失效的问题，还减少了事件监听器的数量，提高了代码的效率和可维护性。
