javascript - 动态创建的列表上的单击事件

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我想将事件处理程序添加到动态生成的列表中。我需要防止列表项上的默认操作，而只是控制台日志“单击”。我正在尝试做的一个例子如下:

$("#make-list").click(function() {
    var mainList = document.getElementById("the-list");
    for(var i = 0; i < 6; i++) {
        mainList.innerHTML += "<li class='list-item'><a class='the-list__link' href='https://example.com'>Click ME!</a></li>"
    };
})

$(".the-list__link").on("click", function() {
    e.preventDefault();
    console.log("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="make-list">MAKE LIST</button>
<ul id="the-list"></ul>

这些答案:

• Click event doesn't work on dynamically generated elements

• Event binding on dynamically created elements?

解释一下，由于.click()事件被委托(delegate)，使用.on()方法。我正在这样做。为什么不起作用？

Answer 1

1. 您实际上并未委托(delegate)点击(应为 $("#the-list").on("click", '.the-list__link')
2. 您忘记将事件传递给执行 e.preventDefault(); 的函数

$("#make-list").click(function() {
  var mainList = document.getElementById("the-list");
  for(var i = 0; i < 6; i++) {
    mainList.innerHTML += "<li class='list-item'><a class='the-list__link' href='https://example.com'>Click ME!</a></li>"
  };
})

$("#the-list").on("click", '.the-list__link', function(e) {
  e.preventDefault();
  console.log("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="make-list">MAKE LIST</button>
<ul id="the-list"></ul>