使用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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
jquery实现页面加载效果
Feb 21 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
详谈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的ZipArchive类用法实例
2014/10/20 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
python实现自动重启本程序的方法
2015/07/09 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python函数的万能参数传参详解
2019/07/26 Python
利用python实现周期财务统计可视化
2019/08/25 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
如何执行一个shell程序
2012/11/23 面试题
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
敬老月活动总结
2014/08/28 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015年中秋节主持词
2015/07/30 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers