使用jquery給新生的th綁定hover事件的實(shí)例

更新時(shí)間：2017年02月10日 10:06:40 投稿：jingxian

下面小編就為大家?guī)硪黄褂胘query給新生的th綁定hover事件的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

這是昨天在做一個(gè)動(dòng)態(tài)的table時(shí)遇到的一個(gè)小問題，table的th需要讓鼠標(biāo)在移入和移出時(shí)顯示顏色變化，之前th是固定寫死的，直接可以用jquery的hover()方法來實(shí)現(xiàn)。現(xiàn)在th需要用js/ajax來動(dòng)態(tài)生成加載到頁(yè)面，用hover()也就沒效果了（因?yàn)橐匦陆oth綁定mouseover和mouseout事件，而且考慮到可能會(huì)有多次加載th等情況，bind也要多次綁定，比較麻煩），在這里我使用了live來解決給新生的th綁定hover事件：

代碼如下：

$(function(){
 //....
 $("th").live("mouseover",function(){
    $(this).attr("style","color:#EE7600;font-weight:bold");
  }).live("mouseout",function(){
    $(this).removeAttr("style");
  });
 //....
});

很簡(jiǎn)單的一段代碼，使用兩次live()分別給th綁定上mouseover和mouseout事件，由于.live()方法是使用了事件委托，能對(duì)一個(gè)還沒有添加進(jìn)DOM的元素有效，所以只要在jq中使用一次live，對(duì)之后加載進(jìn)的元素都會(huì)有效果。

以上這篇使用jquery給新生的th綁定hover事件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery 使用簡(jiǎn)明教程
jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì)，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。對(duì)于網(wǎng)頁(yè)開發(fā)者來說，學(xué)會(huì)jQuery是必要的。因?yàn)樗屇懔私鈽I(yè)界最通用的技術(shù)，為將來學(xué)習(xí)更高級(jí)的庫(kù)打下基礎(chǔ)，并且確實(shí)可以很輕松地做出許多復(fù)雜的效果
2014-03-03
密碼框顯示提示文字jquery示例
密碼框提示文字的功能還是比較實(shí)用的，下面為大家介紹下使用jquery簡(jiǎn)單的實(shí)現(xiàn)下，喜歡的朋友可以參考下
2013-08-08
基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁(yè)面關(guān)閉)
最近做了一個(gè)項(xiàng)目，其中有需求要求實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后倒計(jì)時(shí)功能，其中有個(gè)難點(diǎn)：要求關(guān)閉頁(yè)面也進(jìn)行倒計(jì)時(shí)。好吧，下面小編把jquery 發(fā)送驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼分享給大家，大家可以參考下
2016-09-09
jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實(shí)現(xiàn)漸變色柱狀圖的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
jQuery實(shí)現(xiàn)的進(jìn)度條效果
本文主要給大家介紹的是jQuery實(shí)現(xiàn)的進(jìn)度效果的實(shí)例代碼，其實(shí)現(xiàn)原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式）有需要的小伙伴可以參考下。
2015-07-07
jQuery控制文本框只能輸入數(shù)字和字母及使用方法
這篇文章主要介紹了jQuery控制文本框只能輸入數(shù)字和字母及使用方法的相關(guān)資料，非常不錯(cuò)而且實(shí)用性也很高,需要的朋友可以參考下
2016-05-05
jQuery-Citys省市區(qū)三級(jí)菜單聯(lián)動(dòng)插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery-Citys省市區(qū)三級(jí)菜單聯(lián)動(dòng)插件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery.form.js插件不能解決連接超時(shí)(timeout)的原因分析及解決方法
jQuery.form.js是一個(gè)form插件，支持ajax表單提交和ajax文件上傳。最近在使用jquery.form.js提交包含文件的表單時(shí)，當(dāng)碰上網(wǎng)速較慢時(shí)，而我們又設(shè)置了timeout時(shí)我們的頁(yè)面會(huì)死在這里，怎么回事呢，下面腳本之家小編給大家解答下
2016-10-10
jquery 輸入框數(shù)字限制插件
jquery 輸入框數(shù)字限制插件，需要的朋友可以參考下。
2009-11-11