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
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
19个Android常用工具类汇总
2014/12/30 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python热力图实现简单方法
2021/01/29 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
煤矿班组长竞聘书
2014/03/31 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL