jquery 动态增加的html元素,初始化设置在id或class上的事件无效-阿里云开发者社区

开发者社区> 馨语随风飞> 正文

jquery 动态增加的html元素,初始化设置在id或class上的事件无效

简介: 一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("mouseover",function(e){ alert("鼠标经过了"); }); }); 正常情况下,这样的写法是正确的。
+关注继续查看

一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子:

$(document).ready(function(){
    $(".class").on("mouseover",function(e){
      alert("鼠标经过了");
    });
});

正常情况下,这样的写法是正确的。可是往往当我们需要通过jquery动态的添加一些html元素到界面时,会发现定义的全局方法对新增元素无效了,举个栗子:

function addDom(){
   $("#abc").append("<div class='class'></div>");
}

以前处理的方案是初始化事件时使用live,栗如:

$(".class").live("mouseover",function(){
  alert("鼠标经过了");
});

今天使用jquery 1.10.2时居然提示live关键字无效,百度一下,原来在新版本的jquery中去掉了live关键字,新的写法如下:

$(document).ready(function(){
	$(document).on("mouseover",".class",function(e){
		alert("鼠标经过了");
	});
}

至此,完美解决。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
python应用领域分析
python应用领域分析
6 0
学习vue3之路day1
学习vue3之路day1
17 0
学习vue3之路day2
学习vue3之路day2
5 0
最好用的 7 款 Vue 3 富文本编辑器
富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要。选不好,配置不好,直接影响产品质感和用户体验,所以说在选择编辑器方面花点时间是值得的。 我试用了市面上所有主流富文本编辑器,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的编辑器,把最好、最有特点的 7 款编辑器挑出来,分享给大家。这些编辑器各有各的特点,有些功能多样,但整体很重,有些功能虽然少,但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的编辑器。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
8 0
OY
VerCel 免费托管前端项目
VerCel 免费托管前端项目
5 0
Nginx-基本概念和使用
Nginx-基本概念和使用
8 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
3 0
学习vue3之路day3
学习vue3之路day3
5 0
+关注
馨语随风飞
毕业于211院校四川农业大学地理信息系统专业,毕业后从事GIS相关研发7年,熟悉C#、JAVA和前端开发,在GIS领域对地理空间算法有一定的个人认识和见解。
26
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载