jQuery动态添加元素无法触发绑定事件的解决方法分析


Posted in jQuery onJanuary 02, 2018

本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考,具体如下:

最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料,发现原来要这样处理:

先上我出错的代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" >
  <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
//这里是动态添加元素
      $(".add").click(function(){
        var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");
        $("body").append(btn);
      })<br><br>//这里是为添加的元素添加事件
      $(".newBtn").click(function(){
        alert("这里是新添加的元素触发的事件");
      })
    })
  </script>
</head>
<body>
<button class=" add btn btn-default">添加按钮</button>
</body>
</html>

奉上我的解决方法

方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。

$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
  alert('这里是动态元素添加的事件');
})

方法二:利用on()事件绑定($(ParentEle).on("click",".thisEle",function(){})

$("body").on("click", ".newBtn", function() {
   alert('这里是动态元素添加的事件');
});
//这里的ParentEle是 thisEle的父辈元素或者祖先元素,ParentEle可以是document,也可以是body等。
//注意:如果此时调用的函数是外部定义好的函数,那在调用的时候不要加(),不然会跳过点击事件直接触发函数
$("body").on("click", ".newBtn",aa );
function aa(){
    alert('这里是动态元素添加的事件');
}

ok,问题解决,继续爬坑。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery常用选择器详解
Jul 17 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
You might like
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JS解析XML实例分析
2015/01/30 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
layui实现数据分页功能
2019/07/27 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
付款证明格式范文
2015/06/19 职场文书
房屋产权证明书
2015/06/19 职场文书
追悼会家属答谢词
2015/09/29 职场文书
导游经典开场白——导游词
2019/04/17 职场文书