使用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 单例/单体模式(Singleton)
Apr 07 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JS常用函数使用指南
Nov 23 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
vue实现商城购物车功能
Nov 27 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 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脚本数据库功能详解(中)
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python获取服务器信息的最简单实现方法
2015/03/05 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
有个性的自我评价范文
2013/11/15 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
JavaScript canvas实现流星特效
2021/05/20 Javascript
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers