Javascript jquery事件侦听器对动态列表项多次调用

我正在尝试使用jQuery设置事件侦听器，当用户单击动态创建的列表中的项目时，将调用该事件侦听器。 我面临的问题是，最初当我点击该项目时，什么都没有发生。虽然第二次它工作得很好，但每次之后它似乎都会递归地调用自己。我相信这可能是由于重点

这是Html

<div id="routes_list">
  <ul id="route_click">
    <li id="route_1" value="1"> One </li>
    <li id="route_2" value="2"> Two </li>
    <li id="route_3" value="3">Three</li>
    <li id="route_4" value="4"> Four </li>
  </ul>
</div>

---

您可以在代码中尝试这一点。

该问题是由嵌套事件处理程序引起的

第一次单击

li

时，没有事件处理程序，因此它会传播到#route_click处理程序，该处理程序会添加一个click事件处理程序

第二次单击

li

会运行console.log处理程序，但也会传播到包装器，包装器会添加另一个处理程序，等等

当您添加动态HTML（在js运行后添加HTML）时，您可以删除“第一次”单击并直接绑定到

li

（动态）：

$（文档）。在（'click'，'route#u click li'，函数（）上{
log（$（this.val（））；
})

一个
两个
三个
四个

感谢您的解决方案，并非常清楚地解释了为什么我的代码表现得如此。

$(document).on('click', '#route_click', function() {
  $('#route_click li').click(function(event) {
    event.preventDefault();
    console.log($(this).val());
  });
})