javascript - jQuery 对被注入的元素应用动作

Question

在页面加载后，我有一些页面元素被库注入。这些元素具有由 jQuery 控制的 onClick 操作。由于这些项目是在页面加载后呈现的，因此 jQuery 是否会针对这些项目应用 onClick 操作时遇到问题？

Answer 1

这是使用委托事件的典型情况，您将处理程序绑定到父元素，并使用作为参数传递的特定选择器，并且 jQuery 仅当匹配的选择器是触发事件的选择器时才会触发处理程序。

阅读更多关于直接和委托事件下的 jQuery 文档-> http://api.jquery.com/on/

.on( events [, selector] [, data], handler(eventObject) )

events- 一种或多种以空格分隔的事件类型和可选的命名空间，例如“click”或“keydown.myPlugin”。

selector一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则始终在到达所选元素时触发事件。

data触发事件时要在 event.data 中传递给处理程序的数据。

handler(eventObject)触发事件时执行的函数。值 false 也可以作为简单返回 false 的函数的简写。

以上是针对以后可以添加到DOM的动态元素。

笔记：

1. 在委托事件的情况下，您应该始终将其绑定到绑定处理程序时可用的最近的静态容器。更多信息：所有 jquery 事件都应该绑定到 $(document) 吗？

2. 但是，直接绑定到元素总是更好，这可以通过在元素插入到 DOM 之后绑定处理程序来实现。

Answer 2

使用表格：

$("#myid").on("click",".myTargetElement", function(){
// do my click stuff here
});

示例标记：

<div id="myid">
   <div class="myTargetElement">Click Me</div>
   <div class="myTargetElement">Click Me</div>
</div>

注意：此表单绑定到文档而不是父元素，强制文档遍历，因此不推荐最佳方式：

$(".myTargetElement").on("click", function(){
// do my click stuff here
});

示例：克隆上面标记中的第一个元素，并在单击时将它们变为蓝色：

$("#myid").on("click",".myTargetElement", function(){
    $(this).css('color','blue');
});

$('.myTargetElement').eq(0).clone().text("New").appendTo('#myid');