Question

我想将事件处理程序添加到动态生成的列表中。我需要阻止列表项的默认操作，只需控制台日志＆＃34;点击＆＃34;。我尝试做的一个例子如下：

＆＃13;

$("#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");
});

＆＃13;

<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>

＆＃13;

这些答案：

说明由于委派.click()事件的方式，使用.on()方法。我这样做。为什么不起作用？

Answer 1

您实际上并未委托点击（应为$("#the-list").on("click", '.the-list__link'）
您忘记将事件传递给执行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>

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

1 个答案: