Edit：这个问题与其他问题类似(正如@jonathan lonowski所评论的)，关于如何将事件处理程序附加到动态创建的元素。然而，我的问题是，在脚本执行过程中，我没有意识到事件处理程序是如何一次绑定到特定元素的——相反，我认为事件处理程序监听所有事件，独立于元素。我不知道问题的根源，也不知道用什么术语来搜索。回想起来，我看到其他问题都是针对同一个问题的。
我正在努力理解为什么jQuery不会处理类定向事件，除非事件处理程序被放置在另一个事件处理程序中。
下面的代码灵感来自sololearn.com上的jQuery课程，但没有解释为什么点击删除按钮事件处理程序被放置在点击添加按钮事件处理器中。
当我试图移动remove按钮类单击的事件处理程序块，以便站在add按钮单击的事件处理器块之前或之后时，单击remove按钮时没有响应。
我怀疑它失败了，因为：这没有指向正确的对象。但从alert()的实验来看，在我看来：这是指触发匿名函数的select操作上下文，我将事件处理程序放在root$(function()｛｝)中的位置应该无关紧要；条款
也许我错过了一些显而易见的东西？我是jQuery的新手，但事件处理的逻辑对我来说似乎并不清楚。我所学的教程并没有给我答案。谢谢
HTML部分：
<html>
<head>
<title>My To-Do List</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div width="500px">
<h1>My To-Do List</h1>
<p>
<input id="value" type="text" placeholder="New Item" autofocus />
<button type="button" id="btn_add" class="action" name="add_btn">Add</button>
</p>
<p>
<ol id="my_list">
<!-- list-items get dynamically added here -->
</ol>
</p>
</div>
</body>
</html>
JS部分：
$(document).ready(function(){
$("#btn_add").on("click", function(){
var val = $("#value").val();
if (val !== "") {
var new_e = $("<li></li>").text(val);
$(new_e).append("<button class='rem' name='rem_btn'>X</button>");
$("#my_list").append(new_e);
$("#value").val("");
$(".rem").on("click", function(){
$(this).parent().remove();
});
}
});
});
对于任何DOM事件侦听器，我们都必须指定元素。因此，我们使用.ready来确保DOM被呈现，并且我们有要为其绑定事件的元素被呈现。
来到
但没有解释为什么点击删除按钮事件处理程序位于单击添加按钮事件处理程序中。
因为您的动态元素仅在click-on-add-button之后创建。因此，我们不会为不存在的DOM元素(click-on-remove-button)编写事件处理程序
如果你不想在条件下写，就写这个
$(document).on("click", ".rem", function() {
$(this).parent().remove();
});
这将把click侦听器绑定到DOM中的.rem元素。由于您正在动态创建.rem元素，因此需要将该事件绑定到文档上并指定选择器。
$(document).ready(function() {
$("#btn_add").on("click", function() {
var val = $("#value").val();
if (val !== "") {
var new_e = $("<li></li>").text(val);
$(new_e).append("<button class='rem' name='rem_btn'>X</button>");
$("#my_list").append(new_e);
$("#value").val("");
}
});
});
$(document).on("click", ".rem", function() {
$(this).parent().remove();
});<html>
<head>
<title>My To-Do List</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div width="500px">
<h1>My To-Do List</h1>
<p>
<input id="value" type="text" placeholder="New Item" autofocus />
<button type="button" id="btn_add" class="action" name="add_btn">Add</button>
</p>
<p>
<ol id="my_list">
<!-- list-items get dynamically added here -->
</ol>
</p>
</div>
</body>
</html>您说您将"listener"绑定到元素，这澄清了问题一点
让我以为例进行解释
考虑html
<a id="anchor">Element</a>
纯JavaScript：
function someListener(event){
console.log(event.target); //prints anchor element
}
document.getElementById("anchor").addEventListener('click', someListener); //event listener binded to anchor element
使用Jquery：
$("#anchor").click(someListener); //same here binding click event listener for anchor element.
这里DOM元素是<a />，click事件的监听器是someListener。
在这两种情况下，如果DOM中没有anchor元素。它引发了异常。因此，在为该元素绑定事件侦听器之前，请确保该元素存在于DOM中