Question

我需要动态地向一个元素添加一个类。但是在添加了类之后，与此类相关的所有事件都只能从元素开始，这些元素的类已在文档加载时定义。

考虑这个例子 Text 1尚未上课，而Text 2则有。单击该按钮时，myClass将分配给Text 1，因此Text 1和Text 2现在都来自myClass类。
单击myClass的元素时，应显示警告框，但仅在单击Text 2时触发此事件。该元素，其类已在文档加载时定义。

<button>Add class to Text 1</button><br />
<a href="#">Text 1</a> <br />
<a href="#" class="myClass">Text 2</a>

<script>
$(document).ready(function() {
  $("button").click(function() {
    $("a").addClass("myClass");
  });
  $(".myClass").click(function() {
    alert("clicked!");
  });
});
</script>

这是一个小提琴：https://jsfiddle.net/zx8wuy97/

Answer 1

一种选择是使用event delegation。在这样做时，事件附加到一个常量父元素，并且在实际触发事件时（而不是在附加事件时）检查后代元素的类。

您应该将事件侦听器附加到公共祖先元素，但在这种情况下，我将其附加到$(document).on('click', ".myClass", function() { alert("clicked!"); });，因为您没有提供任何其他标记。

Updated Example

{{1}}

Answer 2

$(".myClass").click(function() {
   alert("clicked!");
});

// Is the same as:

$("body").on("click", ".myClass",function() {
   alert("clicked!");
});

与动态加载的内容一样，这将解决上述问题。

In jQuery, how to attach events to dynamic html elements?

从之后分配的类触发事件

2 个答案: