使用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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 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中如何在有限的内存中读取大文件
2013/07/02 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python List cmp()知识点总结
2019/02/18 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
医学生求职自荐信
2013/10/25 职场文书
项目投资意向书
2014/04/01 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Echarts如何重新渲染实例详解
2022/05/30 Javascript