解决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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery仿微信聊天界面
May 06 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JS 建立对象的方法
2007/04/21 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
数据库方面面试题
2012/04/22 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
一年级小学生评语
2014/04/22 职场文书
道路施工安全责任书
2014/07/24 职场文书
社区创先争优承诺书
2014/08/30 职场文书
信息合作协议书
2014/10/09 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年药房工作总结
2014/11/22 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
学校运动会加油词
2015/07/18 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript