• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 解决jQuery ajax动态新增节点无法触发点击事件的问题

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

作者:fogwu 字体:[增加 减小] 来源:互联网

fogwu 通过本文主要向大家介绍了jquery,ajax,新增节点等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在写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动态新增节点无法触发点击事件的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 关于jquery动态增减控件的一些想法和小插件
  • jQuery实现的省市联动菜单功能示例【测试可用】
  • jQuery EasyUI API 中文文档 - NumberBox数字框
  • jquery 操作iframe的几种方法总结
  • jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
  • jQuery实现伸展与合拢panel的方法
  • 浅谈jQuery为哪般去掉了浏览器检测
  • jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
  • jQuery实现指定区域外单击关闭指定层的方法【经典】
  • jQuery中append()方法用法实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实用函数用法总结
    • 分享我的jquery实现下拉菜单心的
    • jquery中实现标签切换效果的代码
    • jQuery简单动画变换效果实例分析
    • 用jquery实现自定义风格的滑动条实现代码
    • jQuery实现图片局部放大镜效果
    • 基于jquery实现省市联动效果
    • Bookmarklet实现启动jQuery(模仿 云输入法)
    • jquery实现触发时更新下拉列表内容的方法
    • 基于jQuery+Cookie实现的防止刷新的在线考试倒计时

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有