使用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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
javascript实现简易聊天室
Jul 12 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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 Array交叉表实现代码
2010/08/05 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
介绍一下SQL Server的全文索引
2013/08/15 面试题
项目资料员岗位职责
2013/12/10 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
催款函怎么写
2015/06/24 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
导游词之青岛崂山
2019/12/27 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server
排查Tomcat进程假死的问题
2022/05/06 Servers