动态加载的元素,当你用预先用筛选器绑定的click点击事件失效,如:$(".btn1").click(function(){});
点击事件实现
jquery实现点击事件事件有以下几种方式将函数绑定到 click 事件
js部分
$(function(){
//普通点击-触发或将函数绑定到被选元素的点击事件
$(".btn1").click(function(){
alert("你点击了btn1");
//被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
$(".btn1").bind("click",function(){
alert("你点击了btn1");
//方法在被选元素及子元素上添加一个或多个事件处理程序
//自jQuery版本1.7起,on()方法是bind()、live()和delegate()方法的新的替代品
$(".btn1").on("click",function(){
alert("你点击了btn1");
});
html部分
<button class="btn1">点击btn1</button>
动态加载元素的点击事件
当使用js动态加载的元素,发现如:$(".btn1").click(function(){});等几种方式已经不好用了,失效了,不起作用了。
//如:动态加载的按钮btn3失效
$(".btn3").click(function(){
alert("你点击了btn3");
});
此时可以将点击事件委托到document。
如:$(document).on("click",".btn3",function(){});
js部分
//动态加载btn3按钮
$(".btn2").click(function(){
$("#box").append("<button class=\"btn3\">点击btn3</button><br/><br/>");
//点击事件委托到document
$(document).on("click",".btn3",function(){
alert("你点击了btn3");
});
html部分
<button class="btn2">点击btn2(动态载btn3按钮)</button><br/><br/>
<div id="box">
</div>
完整示例
<html>
<title>动态加载点击事件失效</title>
<script type="text/Javascript" src="jquery.min.js"></script>
<script type="text/Javascript">
$(function(){
//普通点击
$(".btn1").click(function(){
alert("你点击了btn1");
//动态加载btn3按钮
$(".btn2").click(function(){
$("#box").append("<button class=\"btn3\">点击btn3</button><br/><br/>");
//点击事件委托到document
$(document).on("click",".btn3",function(){
alert("你点击了btn3");
</script>
</head>
<button class="btn1">点击btn1</button><br/><br/>
<button class="btn2">点击btn2(动态载btn3按钮)</button><br/><br/>
<div id="box"></div>
</body>
</html>
原创文章,转载请注明出处:https://www.weizhixi.com/article/74.html
java UTC时间格式化 时间带T Z
(60389)
最近在调用一个国外的网站api,返回的json数据格式的时间如 2018-01-31T14:32:19Z 。时间字符串带T和Z。这时候需要根据业务来确认你是否要...
iphone如何使用imovie编辑竖屏视频
(11368)
iphone自带的iMovie剪辑app很好用,而且功能强大。无论是合拼视频过度、放慢、添加多首音乐自由合辑等。但发现导出的视频都是类似正方形的很小,竖屏的视频...
springmvc接收参数异常application/json not supported
(9891)
纲要1、解决:HTTP媒体类型不支持异常,HttpMediaTypeNotSupportedException: Content type 'appli...
如何将idea自带的maven添加到环境变量
(8092)
想要通过命令形式在cmd操作IntelliJ IDEA自带的maven,那么就必须配置idea的maven环境变量。下面以window 10 和 idea 20...
java初探Tess4j识别图片文字
(7335)
想学习下识别图片中的文字,找到了Tess4j图文识别的方式,于是就初步探究下,玩下识别验证码。第一步,下载1、以3.4.2版本为例,下载Tess4j-3.4.2...
java php js AES加密解密相互通用工具类例子
(1087)
有空之余整理了一份java、php和javascript的AES互相通用的加密解密工具类。AES算法加密和解密有几种加密模式,以下例子使用128位密钥长度CBC模式演示。AES属于对称加密算法...
解决Imagick和GS将PDF转成JPG图片异常及例子
(1231)
本想简单的将PDF转JPG,可是网上在线转不太安全,某些PDF阅读器又都要收费,那只好用代码将pdf转成图片,自己动手丰衣足食。在PHP中使用Imagick将PDF转JPG/PNG等图片时遇到...
解决IOS设备浏览器返回或前进时从无法执行某操作
(501)
发现在ios设备浏览器中返回上一个页面是从浏览器缓存中读取的,在跳转到另一个页面前的一些操作,如“加载中”,在另一个页面点击返回时“加载中”状态依然存在,相应js并没...
Ueditor 百度编辑器利用视频插件上传音频
(704)
百度编辑器Ueditor怎么利用视频插件上传音频呢,编辑器的上传视频插件也有mp3等音频格式上传,但是上传后的标签是video,这并不是我们想要的效果,我们想要是视频用video标...
php文件目录列表转成tree状
(487)
文件目录列表如何转成tree状,即格式化文件目录列表,获得具有父子级关系数据后,再转成tree装数据结构。目录列表转父子关系数据/** * 格式化文件目录列表,使得数据具有父...