使用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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue选项卡切换的实现案例
Apr 11 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
什么是岗位职责
2013/11/12 职场文书
人事专员的职责
2014/02/26 职场文书
化妆品活动策划方案
2014/05/23 职场文书
旅游活动总结
2014/08/27 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server