1、页面动态生成的dom元素,监听事件失效。需用事件代理进行监听。

对于动态绑定元素可以这样写

$(document).on('click', '.xxx', function() {
// do something
});

$(document)可以改成要绑定事件元素的父节点

.xxx 就是指的当前元素

这样就可以实现事件的代理

.on(events, callback) 只能绑定页面已有元素的事件。
.on(events, selector, callback) 则是在 已有的元素 上绑定 代理的 事件处理器 (addEventListener 实际上在该已有元素上调用),但只有事件的实际 source 是其子代元素并且符合 selector 时, callback 才会以该实际 source 为 this指向的对象被调用。

For example:

$(document).on("click", "a", function () {
console.log(this.tagName.toLowerCase()); // "a"
return false;
});

这样即可监听页面创建时尚未存在的 <a> 元素所产生的事件。

http://api.jquery.com/on/

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored.

渣翻译:

委托事件 的优势是可以处理在其后添加入文档的子代元素所产生的事件。通过选择一个添加委托事件时必然存在的元素,你可以使用委托事件以避免频繁添加和移除事件处理器的需求。例如,该元素可以是在 MVC 设计中视图的包含元素,或者如果事件处理器要监控文档中所有冒泡的事件时,则是 documentdocument 在载入任何其它 HTML 之前即可在文档的头部获得,所以在此添加事件处理器而不用等待 document 的 ready 是安全的。

除了处理尚未创建的子代元素上产生的事件,委托事件的另一个优势是需要监控多个元素时的性能更好。

jQuery 问题收集的更多相关文章

  1. Jquery插件收集

    移动端滚动条插件iScroll.js http://www.cnblogs.com/starof/p/5215845.html http://www.codeceo.com/article/35-jq ...

  2. jquery 资料收集

    1.jquery 特效:http://www.yeshou-jquery.com/yeshou/jquery.html 2.jquery 无缝文字滚动效果(跑马灯效果)插件 Marquee(MSCla ...

  3. 一些jquery特效收集

    jQuery幻灯片插件带投影的图片叠加切换幻灯片轮播 特效:http://www.jsfoot.com/jquery/images/ jquery文字滚动上下间歇文字滚动 http://www.17s ...

  4. Jquery插件收集【m了慢慢学】

    1. Simple Effects for Drop-Down Lists 一个jQuery插件用于将普通的select控件转成一个带有一些简单扩展效果的下拉列表. 2. X-editable 这个插 ...

  5. 工作中js和jquery 函数收集

    1. 判断单选框是否选中  $("xxx").is(":checked")       返回类型是 true/false 2. $(this)[0].nextS ...

  6. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

  7. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. ajax--实现异步请求,接受响应及执行回调

    ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页的内容 ajax指是一种创建交互式网页应用的网页开发技术,其实就是实现前后端交互. 1)ajax是异步javascr ...

  9. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

随机推荐

  1. jmeter之登录接口的一次简单压测与分析

    前言:登录接口的一次简单压测与分析 1.接口文档 2.配置元件 3.结果分析 1.接口文档 a.拿到接口文档 接口地址:http://localhost:8080/jpress/admin/login ...

  2. SPSS详细教程:OR值的计算

    SPSS详细教程:OR值的计算 一.问题与数据 研究者想要探索人群中不同性别者喜欢竞技类或娱乐性体育活动是否有差异.研究者从学习运动医学的学生中随机招募50名学生,记录性别并询问他们喜欢竞技类还是娱乐 ...

  3. kali 开启xdebug

    1.安装xdebug 参考https://xdebug.org/docs/install 2.配置 # vi /etc/php/7.3/mods-available/xdebug.inizend_ex ...

  4. Vue事件总线

    一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...

  5. 网络流强化-HDU4280

    数组没开够居然显示TLE而不是RE,自己觉得好的优化的方法没什么用…… //http://www.renfei.org/blog/isap.html 带解释的 //https://www.cnblog ...

  6. 如何通过xmake进行交叉编译

    xmake 提供了方便灵活的交叉编译支持,大部分情况下,都不需要配置很复杂的toolchains前缀,例如:arm-linux- 什么的 只要这个toolchains目录满足如下结构(大部分的交叉工具 ...

  7. Netty之Page级别的内存分配

    Page 级别的内存分配: 之前我们介绍过, netty 内存分配的单位是chunk, 一个chunk 的大小是16MB, 实际上每个chunk, 都以双向链表的形式保存在一个chunkList 中, ...

  8. ac自动机(tree+kmp模板)

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  9. python学习第十八天计算机字符编码

    人类语言和计算机语言二进制怎么沟通,最开始字符编码为ascii码对照表 包括数据和字母,没有汉字,中国自己搞了一套自己的编码 gb2312编码后来发展GBK编码,日本,韩国都,甚至台湾也搞自己的编码, ...

  10. OpenLayers绘制地图,无需外网,内网访问,提高安全性。

    1. 首先引入ol ,npm i --save ol 2. 创建地图 一个地图初步就这样完成了. 3. 怎么与后台进行交互? 具体参考文档:http://weilin.me/ol3-primer/ch ...