使用jquery给新生的th绑定hover事件的实例

 更新时间:2017年02月10日 10:06:40   投稿:jingxian  
下面小编就为大家带来一篇使用jquery给新生的th绑定hover事件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这是昨天在做一个动态的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事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery 使用简明教程

    jquery 使用简明教程

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果
    2014-03-03
  • 密码框显示提示文字jquery示例

    密码框显示提示文字jquery示例

    密码框提示文字的功能还是比较实用的,下面为大家介绍下使用jquery简单的实现下,喜欢的朋友可以参考下
    2013-08-08
  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,下面小编把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
    2016-09-09
  • jQuery插件Echarts实现的渐变色柱状图

    jQuery插件Echarts实现的渐变色柱状图

    本文主要介绍了jQuery插件Echarts实现渐变色柱状图的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jQuery实现的进度条效果

    jQuery实现的进度条效果

    本文主要给大家介绍的是jQuery实现的进度效果的实例代码,其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式)有需要的小伙伴可以参考下。
    2015-07-07
  • jQuery控制文本框只能输入数字和字母及使用方法

    jQuery控制文本框只能输入数字和字母及使用方法

    这篇文章主要介绍了jQuery控制文本框只能输入数字和字母及使用方法的相关资料,非常不错而且实用性也很高,需要的朋友可以参考下
    2016-05-05
  • jQuery-Citys省市区三级菜单联动插件使用详解

    jQuery-Citys省市区三级菜单联动插件使用详解

    这篇文章主要为大家详细介绍了jQuery-Citys省市区三级菜单联动插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • jQuery Ajax实现跨域请求

    jQuery Ajax实现跨域请求

    这篇文章主要为大家详细介绍了jQuery Ajax实现跨域请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

    jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。最近在使用jquery.form.js提交包含文件的表单时,当碰上网速较慢时,而我们又设置了timeout时我们的页面会死在这里,怎么回事呢,下面脚本之家小编给大家解答下
    2016-10-10
  • jquery 输入框数字限制插件

    jquery 输入框数字限制插件

    jquery 输入框数字限制插件,需要的朋友可以参考下。
    2009-11-11

最新评论