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("鼠标经过了");
	});
}

至此,完美解决。

相关文章
|
1月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
52 1
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
25天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
WK
|
1月前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
26 2
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
27 2
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
17 0