使用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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
vue项目中锚点定位替代方式
Nov 13 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php统计文章排行示例
2014/03/04 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
js简易版购物车功能
2017/06/17 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
中班开学寄语
2014/04/04 职场文书
法定代表人资格证明书
2014/09/11 职场文书
入党培养人考察意见
2015/06/08 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server