解决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轻松实现无缝轮播效果
Mar 22 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
CI框架的安全性分析
2016/05/18 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python实现网站注册验证码生成类
2017/06/08 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
django基于restframework的CBV封装详解
2019/08/08 Python
加热夹克:RAVEAN
2018/10/19 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
2014村务公开实施方案
2014/02/25 职场文书
2014年村官工作总结
2014/11/24 职场文书
电影建党伟业观后感
2015/06/01 职场文书
在人间读书笔记
2015/06/30 职场文书
初二英语教学反思
2016/02/15 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS