如何监听在线生成的dom标签事件

最新推荐文章于 2022-03-10 17:27:33 发布
原创 最新推荐文章于 2022-03-10 17:27:33 发布 · 361 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文探讨了在jQuery中使用动态生成的类名进行事件绑定的方法，比较了#viewDiv的cover类移除操作在click和focus事件触发时的实现。同时，分析了window.onload与$(document).ready的区别，指出后者在DOM树加载完成后即执行，而前者需等待所有资源加载完毕。

body和css部分
在这里插入图片描述
在这里插入图片描述
scrip中引用的是jq
在这里插入图片描述

$("#search").on(“click”, “.esri-search__submit-button, .esri-search__suggestions-menu”, function(){
$("#viewDiv").removeClass(“cover”);
});
click后面的类是动态生成的响应的事件，同理focus。

用window.onload = function ()而不用$(document).ready(function(){})

document.ready方法在DOM树加载完成后就会执行
而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。
也就是说$(document).ready要比window.onload先执行。
结果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

pj1653_9
关注
dom更新监听之 --- Mutation Observer API
xiao_shutong的博客
06-26 1724
1. 概述 2. MutationObserver 构造函数 3. MutationObserver 的实例方法 3.1 observe() 3.2 disconnect()，takeRecords（） 4. MutationRecord 对象 5. 应用示例 5.1 子元素的变动 5.2 属性的变动 5.3 取代 DOMContentLoaded 事件 6. 参考链接 ...
Vue3中的模板指令——DOM事件监听指令v-on
最新发布
传播有益的技术文章，力求精准、专业、专心、专享
06-06 2034
使用v-on指令 (简写为@) 来监听DOM事件，并在事件触发时执行对应的JavaScript脚本。用法：v-on:click="handler"或@click="handler"。
DOM元素动态监控
weixin_33966095的博客
01-08 507
今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕 大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。 动态生成的DOM都是根据id来监听获取元素的信息。 坑1：当时数据较少没有考虑到card渲染方向，所以在页面下面的时候card加载到了浏览器之外 进坑1：当我一开始碰到这个bug时，so easy！！！所以加了一个判断条件，在函数@mous...
DOM深入学习 --- 创建自定义事件（四）
秋天，黄叶坠地，凉风有信。
03-10 1046
创建自定义事件 我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。 自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。 我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如 click 和 mousedown 等内建事件。这可能会有助于自动化测试。 事件构造器 内建事件类形成一个层次结构（hierar
*Web APIs 3 节点·创建元素·DOM核心增删改查·事件监听·DOM事件流·事件委托·鼠标坐标
weixin_48116269的博客
08-12 228
1.1. 节点操作 1.1.1 删除节点 node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script>
科普一个监听DOM的对象-MutationObserver
weixin_44311540的博客
12-29 710
介绍 MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件. 以上这段引自权威牛逼的MDN。（懒得自己写了…） 创建MutationObserver对象 var mo = new MutationObserver( function callback ); 参数只有一...
关于动态生成dom绑定事件失效的原因及解决方法
09-01
在传统的JavaScript事件绑定方法中，如果直接使用jquery的bind方法绑定事件，这种方法只对当前已经存在的DOM元素有效，对于后来动态生成的DOM元素则无法实现事件绑定。原因在于bind方法在执行时，只将事件处理程序...
如何监听页面DOM变动并高效响应
02-25
需求是这样的：在一个包含懒加载资源以及动态DOM元素生成的页面中，需要针对页面中存在的元素添加属性显示标签。首先假设大家已经知道JavaScript中事件的发生阶段(捕获-命中-冒泡)，附上一张图带过这个内容，我们...
jquery 给动态生成的标签绑定事件的几种方法总结
10-18
以下是对jQuery给动态生成的标签绑定事件的几种方法的详细解析： 1. **使用`.on()`方法** `.on()`方法是jQuery 1.7引入的，它是`.bind()`, `.live()`, `.delegate()`等方法的增强版，特别适合处理动态生成的元素...
在线转换html dom结构,HTML DOM结构
weixin_42354972的博客
06-02 384
HTML DOM 定义了访问和操作 HTML 文档的标准。什么是 HTML DOM？HTML DOM 是：HTML 的标准对象模型HTML 的标准编程接口W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。DOM 节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 ...
HTML5新特性之Mutation Observer
weixin_30485799的博客
12-14 434
1、概述 Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。 要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，...
监听动态生成的span标签点击事件
sjn0815的博客
06-03 1888
//.tabcharts是span所在的父级div的class $('.tabcharts').on('click','span',function(){ alert("on---span----"+$(this).html()) //获取span内容 });
Jquery监听动态添加的标签
yepp13的博客
05-22 1424
Jquery监听动态添加的标签需要用 $(‘父标签’).on(‘click’, ‘子标签’, function(){}) 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除...
js代理监听动态添加元素事件(类似jquery的delegate事件)
玉超
12-23 8847
很多时候我们需要监听动态添加的元素事件。 举个例子： 页面中有一个div，div中有一个button以及一个table，我们需要在点击button的时候相应的table行进行排序,而根据特定需求ajax返回数据中的table值是变化的， table变化导致了原先的button必须被移除掉，然后在对应业务地方再添加上一个对table进行排序功能的button。换句话说 这个button的功能是
DOM元素动态监听
weixin_34400525的博客
01-08 584
今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕 大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。动态生成的DOM都是根据id来监听获取元素的信息。 坑1：当时数据较少没有考虑到card渲染方向，所以在页面下面的时候card加载到了浏览器可视界面之外啦 入坑1：当我一开始碰到这个bu...
JavaScript中MutationObServer监听DOM元素详解
晴空闲云
11-19 2301
DOM的MutationObServer接口，可以在DOM被修改时异步执行回调函数，我的理解就是可以监听DOM修改。 基本使用 可以通过MutationObserver构造函数实例化，参数是一个回调函数。 let observer = new MutationObserver(() => console.log("change")); console.log(observer); observer对象原型链如下： 可以看到有disconnect、observer、takeRecords方法。 1.
JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
橙-极纪元-JJYCheng
08-26 1439
第一步：首先在文档加载完时，声明一个Reload函数，在函数里写监听动作； 第二步：在函数下面，直接执行一遍该函数； 第三步：在Ajax请求结束后，执行一遍该函数，就可以做到完全监听了； $(document).ready(function(){ Reload= function () { $("p").on("click", function () { //执行一些动作 }) } //载入监听 Reload(); //ajax请求 $.post("url", { data: da
给dom元素添加事件的监听
weixin_43694639的博客
02-23 7148
一、addEventListener给dom元素添加事件的监听有两种方式 1.用匿名函数方式添加事件的监听 例 &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp
监听DOM变化：高效响应页面动态更新
"本文主要探讨如何在Chrome插件开发中监听和应对页面DOM的变化，特别是在包含懒加载资源和动态生成DOM元素的场景下，如何为页面元素添加属性标签。文章介绍了JavaScript事件的传播机制，并详细讲解了与页面加载相关...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值