使用jquery给新生的th绑定hover事件的实例


Posted in Javascript onFebruary 10, 2017

这是昨天在做一个动态的table时遇到的一个小问题,table的th需要让鼠标在移入和移出时显示颜色变化,之前th是固定写死的,直接可以用jquery的hover()方法来实现。现在th需要用js/ajax来动态生成加载到页面,用hover()也就没效果了(因为要重新给th绑定mouseover和mouseout事件,而且考虑到可能会有多次加载th等情况,bind也要多次绑定,比较麻烦),在这里我使用了live来解决给新生的th绑定hover事件:

代码如下:

$(function(){
 //....
 $("th").live("mouseover",function(){
    $(this).attr("style","color:#EE7600;font-weight:bold");
  }).live("mouseout",function(){
    $(this).removeAttr("style");
  });
 //....
});

很简单的一段代码,使用两次live()分别给th绑定上mouseover和mouseout事件,由于.live()方法是使用了事件委托,能对一个还没有添加进DOM的元素有效,所以只要在jq中使用一次live,对之后加载进的元素都会有效果。

以上这篇使用jquery给新生的th绑定hover事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
深入理解Node中的buffer模块
Jun 03 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
微信小程序云开发详细教程
May 16 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
javascript中this的四种用法
2015/05/11 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
购房协议书范本
2014/10/02 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
大学生村官个人总结
2015/02/15 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript