使用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 事件对象的实现
Jul 13 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
JavaScript 数组去重详解
Sep 15 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php实现网站留言板功能
2015/11/04 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python实现的矩阵类实例
2017/08/22 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
年终总结会议主持词
2014/03/17 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
员工工作自我评价
2014/09/26 职场文书
诚信考试主题班会
2015/08/17 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript