使用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判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
详谈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中Session的概念
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php日历制作代码分享
2014/01/20 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
smarty简单入门实例
2014/11/28 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python操作列表的函数使用代码详解
2017/12/28 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python多线程并发实例及其优化
2019/06/27 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
创意广告词
2014/03/17 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技