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月前
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
22 0
jQuery实现的卡片式翻转时钟HTML源码
|
1月前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
49 11
|
5月前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
62 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
|
4月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
60 1
|
4月前
|
移动开发 JavaScript 前端开发
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
37 5
|
5月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
37 2
|
5月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
71 2
|
5月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
29 1
|
5月前
|
前端开发 JavaScript
html中id和class的相同和不同之处及用法的规范与区别
在HTML中,`id`和`class`都用于标识和选择元素,但存在一些关键差异。