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

至此,完美解决。

相关文章
|
3天前
|
JavaScript
jQuery 事件
jQuery 事件
21 10
|
8天前
|
搜索推荐 前端开发 JavaScript
html的head元素seo优化详解
在HTML的`&lt;head&gt;`元素中进行SEO优化对于提升网页在搜索引擎中的排名至关重要。以下是几个关键策略:确保每个页面有唯一的标题标签(50-60字符),使用描述标签(150-160字符)概括内容并包含关键词,设置正确的字符集(如UTF-8),使用视口元标签优化移动端显示,添加规范链接避免重复内容,利用结构化数据(如JSON-LD)帮助搜索引擎理解内容,优化样式和脚本加载,以及设置网站图标增强品牌识别。这些措施能显著提高网页的搜索引擎可见性和用户点击率。
|
8天前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
20 3
|
30天前
|
前端开发 UED
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
|
12天前
|
前端开发 UED SEO
html元素的使用禁忌
在使用HTML元素时,需遵循一些禁忌和最佳实践,以确保网页的可访问性、可维护性和性能。避免使用过时标签(如`&lt;font&gt;`、`&lt;center&gt;`),滥用`&lt;div&gt;`和`&lt;span&gt;`,及忽视必要属性(如`&lt;img&gt;`的`alt`属性)。应尽量集中管理样式于CSS文件,减少内联样式,避免过多嵌套,关注可访问性(如使用ARIA属性),并合理使用文档结构(如`&lt;head&gt;`、`&lt;body&gt;`和标题标签)。遵循这些指南,有助于提升用户体验和SEO效果。
|
24天前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
24 2
|
29天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
33 4
|
7天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
12 0
|
29天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
36 1
|
27天前
|
移动开发 前端开发 JavaScript