jquery动态生成dom(比如append)导致js事件无效
如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
<div id="zkdiv">
<input type="button" value="展开" id="zk" class="zk"/> <br>
</div>
$("#zkdiv").on("click",".zk",function(){
console.log("on 点击一次");
});
var html2 = "<input type='button' class='zk' value='新生成的展开' />";
$("#zkdiv").append(html2);
这样一来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会大大降低(使用该方法时要确保.on前面的选择器能选择到对象 否则不起作用)
click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
引用:https://www.jb51.net/article/146535.htm
jquery动态生成dom(比如append)导致js事件无效的更多相关文章
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- jquery动态添加的元素不能直接应用事件方法的时候
对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...
- jquery动态生成二维码添加自定义logo
动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...
随机推荐
- MySQL-09-SQL执行计划
SQL执行计划获取及分析 介绍 (1)获取到的是优化器选择完成的,他认为代价最小的执行计划. 作用: 语句执行前,先看执行计划信息,可以有效的防止性能较差的语句带来的性能问题. 如果业务中出现了慢语句 ...
- anaconda的报错:Anaconda:There is an instance of anaconda navigator already running error
anaconda的报错:Anaconda:There is an instance of anaconda navigator already running error 出现这个问题的时候人蒙了,主 ...
- noip15
童话故事专场 T1 首先,dead line 是一条直线,而不是线段.考试的时候一直以为是线段,那么横竖共有n+m条,考虑斜着的,斜着的交点为有穷的,则需要满足斜率不同,那么只需要统计一边的,再乘2就 ...
- 题解 P3941 入阵曲
题解 观察数据范围,可以 \(\mathcal O(n^2m^2)\) 暴力计算,而加上特殊性质,则可以骗到 \(75pts\) 正解: 我们发现,在一维情况下,\(\mod k\) 相同的前缀和相减 ...
- vue:Missing space before value for key 'components'
原因是Vue对语法比较严格,而eslint是一个语法检查工具,对语法要求极其苛刻严格,于是就error了 解决办法是关闭eslint的语法规则,找到build/webpack.base.conf.js ...
- sql 中的with 语句使用
一直以来都很少使用sql中的with语句,但是看到了一篇文章中关于with的使用,它的确蛮好用,希望以后记得使用这个语句.一.with 的用法With alias_name as (select1)[ ...
- C++ 计算MD5
头文件: #pragma once #ifndef MD5_H #define MD5_H #include <string> #include <fstream> /* Ty ...
- C#多线程---I/O线程实现异步请求
一.场景 利用I/O线程来模拟浏览器对服务器请求的异步操作. 二.例子 1 using System; 2 using System.Collections.Generic; 3 using Syst ...
- ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)
1.Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组 1)该类数组对象必须具有length属性,用于指定数组的长度.如果没有 ...
- LeetCode《买卖股票的最佳时机》系列题目,最详解
目录 说在前面 引例:只能交易一次 一.动态数组定义 二.状态转移方程 三.初始化 四.优化 无限制买卖 一.动态数组定义 二.状态转移方程 三.初始化 四.优化 交易 2 次,最大利润? 一.动态数 ...