解决jQuery ajax动态新增节点无法触发点击事件的问题


Posted in jQuery onMay 24, 2017

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?

其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。

解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码:

<ul id="demo">
  <li class="demo1">a1</li>
  <li class="demo1">a2</li>
  <li class="demo1">a3</li>
 </ul> 
 <script type="text/javascript">
 $("#demo").click(function(){
  $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素
 });
 </script>

方法一:使用live:

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:

$('.demo1').live('click', function(){
 alert('OK');
});

方法二:使用on:

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#demo").on('click','.demol',function(){
 alert('OK')
});

通过上面的两种方法,都可以解决jQuery ajax动态新增节点无法触发点击事件的问题。知道方法了,赶紧的试试吧。

以上所述是小编给大家介绍的解决jQuery ajax动态新增节点无法触发点击事件的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
You might like
php 调试利器debug_print_backtrace()
2012/07/23 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php无序树实现方法
2015/07/28 PHP
php-msf源码详解
2017/12/25 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解webpack 入门与解析
2018/04/09 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Python日志模块logging简介
2015/04/13 Python
详解flask表单提交的两种方式
2018/07/21 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
档案管理员岗位职责
2013/12/01 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
医学求职信
2014/05/28 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android
你知道Java Spring的两种事务吗
2022/03/16 Java/Android