$（document）.on（..）事件有效，但动态生成的元素的$（“ body”）。on（..）事件无效

Question

我已经动态创建了元素

<a class="update-link">

与path: body > div#MySection > table> tbody > tr > td > div > a.update-link。

当我使用

绑定事件时

$(document).on("click", ".update-link", fn) 

事件被触发。

当我使用$("body")或$("#MySection")时，不会触发该事件。 $(document)可行，但由于范围大而效率低下。为什么更具体的选择器不起作用？

Answer 1

您可以通过事件委托传递上下文：

$(() => {
  $(document, ".sec", "button").on("click", () => {
    console.log("clicked");
  });
  
  $(".sec").append("<button>Test</button>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="sec"></section>

因此，在您的情况下，.sec将是body或#MySection。