使用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程序 入门者学习
Jul 09 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
Javascript中For In语句用法实例
May 14 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
AngularJS实现多级下拉框
Mar 25 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
jQuery实现简单弹幕效果
2019/11/28 jQuery
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
什么是Python中的顺序表
2020/06/02 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
化工专业推荐信范文
2013/11/28 职场文书
毕业设计计划书
2014/01/09 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
万年牢教学反思
2014/02/15 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
建党伟业的观后感
2015/06/01 职场文书
工作时间证明
2015/06/15 职场文书
董事会决议范本
2015/07/01 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏