热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery动态添加元素无法触发绑定事件的解决方法分析

这篇文章主要介绍了jQuery动态添加元素无法触发绑定事件的解决方法,结合实例形式分析了动态添加元素无法绑定事件的原因与相关解决方法,需要的朋友可以参考下

本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考,具体如下:

最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料,发现原来要这样处理:

先上我出错的代码:




  
  
  
  
  






奉上我的解决方法

方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。

$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
  alert('这里是动态元素添加的事件');
})

方法二:利用on()事件绑定($(ParentEle).on("click",".thisEle",function(){})

$("body").on("click", ".newBtn", function() {
   alert('这里是动态元素添加的事件');
});
//这里的ParentEle是 thisEle的父辈元素或者祖先元素,ParentEle可以是document,也可以是body等。
//注意:如果此时调用的函数是外部定义好的函数,那在调用的时候不要加(),不然会跳过点击事件直接触发函数

$("body").on("click", ".newBtn",aa );
function aa(){
    alert('这里是动态元素添加的事件');
}

ok,问题解决,继续爬坑。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。


推荐阅读
  • 利用 Jest 和 Supertest 实现接口测试的全面指南
    本文深入探讨了如何使用 Jest 和 Supertest 进行接口测试,通过实际案例详细解析了测试环境的搭建、测试用例的编写以及异步测试的处理方法。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 深入探讨ASP.NET中的OAuth、JWT与OpenID Connect
    本文作为前文关于OAuth2.0和使用.NET实现OAuth身份验证的补充,详细阐述了OAuth与JWT及OpenID Connect之间的关系和差异,旨在提供更全面的理解。 ... [详细]
  • AJAX技术允许网页在不重新加载整个页面的情况下进行异步更新,通过向服务器发送请求并接收JSON格式的数据,实现局部内容的动态刷新。 ... [详细]
  • 本文详细介绍了使用JavaScript和jQuery进行页面加载初始化的方法,包括不同的实现方式及其应用场景,并探讨了两者在初始化过程中的主要区别。 ... [详细]
  • 深入理解希尔排序算法
    本文详细介绍了希尔排序的原理及其相对于传统插入排序的优势,并通过实例解析了希尔排序的具体实现过程,包括代码示例及性能分析。 ... [详细]
  • 免费获取:全面更新的Linux集群视频教程及配套资源
    本资源包含最新的Linux集群视频教程、详细的教学资料、实用的学习课件、完整的源代码及多种软件开发工具。百度网盘链接:https://pan.baidu.com/s/1roYoSM0jHqa3PrCfaaaqUQ,提取码:41py。关注我们的公众号,获取更多更新的技术教程。 ... [详细]
  • 优化使用Apache + Memcached-Session-Manager + Tomcat集群方案
    本文探讨了使用Apache、Memcached-Session-Manager和Tomcat集群构建高性能Web应用过程中遇到的问题及解决方案。通过重新设计物理架构,解决了单虚拟机环境无法真实模拟分布式环境的问题,并详细记录了性能测试结果。 ... [详细]
  • Python库在GIS与三维可视化中的应用
    Python库极大地扩展了GIS的能力,使其能够执行复杂的数据科学任务。本文探讨了几个关键的Python库,这些库不仅增强了GIS的核心功能,还推动了地理信息系统向更高层次的应用发展。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • Bootstrap与Layui的主要差异分析
    在前端开发领域,Bootstrap与Layui是两种非常流行的框架选择。本文将深入探讨这两种框架的主要区别,帮助开发者根据项目需求做出最佳选择。 ... [详细]
author-avatar
nilue1_203
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有