使用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与CSS复习(《精通javascript》)
Jun 29 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
js实现幻灯片轮播图
Aug 14 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
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
javascript 短路法代码精简
2009/08/20 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
python制作抽奖程序代码详解
2021/01/15 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
光声世纪笔试题目
2012/08/25 面试题
大学生学习党课思想汇报
2014/01/03 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
服装设计师求职信
2014/06/04 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python