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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery操作cookie的示例代码
Jun 05 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
npm的lock机制解析
2019/06/20 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
django API 中接口的互相调用实例
2020/04/01 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
求职简历自荐信
2013/10/20 职场文书
小学生综合素质评语
2014/04/23 职场文书
机关搬迁方案
2014/05/18 职场文书
教师求职信范文
2014/05/24 职场文书
跳蚤市场口号
2014/06/13 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
十八大观后感
2015/06/12 职场文书
就业指导讲座心得体会
2016/01/15 职场文书