解决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插件开发之选项卡制作详解
Aug 30 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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常用函数的用法详解
2013/05/10 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python 模拟登陆github的示例
2020/12/04 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
公司面试感谢信
2014/02/01 职场文书
闭幕式主持词
2014/04/02 职场文书
2014组织生活会方案
2014/05/19 职场文书
离职信范本
2015/06/23 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
全网非常详细的pytest配置文件
2022/07/15 Python