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

时间:2022-01-24 00:14:43

一般情况,我们会在页面初始化完成后对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("鼠标经过了");
});
}

至此,完美解决。

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

  1. 解决jquery动态增加元素后children值没有变的问题

    html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...

  2. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  3. jquery动态增加或删除tr和td【实际项目】

    难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...

  4. jquery 动态增加删除行

    最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋 ...

  5. Jquery动态添加元素并给元素增加onchange相应

    动态添加元素: $select = $("<select></select>"); $("<option></option&gt ...

  6. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> &lt ...

  7. jquery 动态增加table行,动态删除table行

    在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. &lt ...

  8. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  9. js动态增加html页面元素

    问题:   <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2 ...

随机推荐

  1. 基于Live555&comma;ffmpeg的RTSP播放器直播与点播

    基于Live555,ffmpeg的RTSP播放器直播与点播 多路RTSP高清视频播放器下载地址:http://download.csdn.net/detail/u011352914/6604437多路 ...

  2. C&num; xml2json

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. Node&period;js &plus; Express &plus; Mongodb 开发搭建个人网站(二)

    二.路由 1.打开 routes/index.js ,这个意思就是  捕获到访问主页的get请求: 并通过 app.js 分配到对应的路由里: 看到这里,打开 http://127.0.0.1:300 ...

  4. 【Java学习笔记之二十五】初步认知Java内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  5. 使用Boostrap框架写一个登录&bsol;注册界面

    Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...

  6. 按键精灵PC版&lt&semi;末日王者&gt&semi;

    更新模式[强制] 更新版本[1.28] 更新链接[https://yunfei-1256035889.cos.ap-beijing.myqcloud.com/%E6%9C%AB%E6%97%A5%E4 ...

  7. Python中面向对象的概念(科普)

    面向对象(OOP)基本概念 面向对象编程 —— Object Oriented Programming 简写 OOP 目标 了解 面向对象 基本概念 01. 面向对象基本概念 我们之前学习的编程方式就 ...

  8. ListView嵌套ScrollView会出现的问题

    1.出现的问题:ListView高度显示不对,滑动冲突 (1)解决方法:如果说listview的数据一屏就可以显示完整,那么只需要在xml或者代码里给listview设置固定高度即可. 如果listv ...

  9. 求两个数的平均值,不能只用(a&plus;b)&sol;2的方法

    #include<stdio.h> int avg1(int a, int b) { //利用移位操作符 //右移移位相当于——>除以2 :(a+b)>>1 //考虑到溢 ...

  10. 事务 — Redis 设计与实现

    非事务状态下的命令以单个命令为单位执行,前一个命令和后一个命令的客户端不一定是同一个: 事务状态则是以一个事务为单位,执行事务队列中的所有命令:除非当前事务执行完毕,否则服务器不会中断事务,也不会执行 ...