解決Jquery向頁面append新元素之后事件的綁定問題

更新時間：2015年03月16日 10:12:31 投稿：hebedich

今天有get到一個新知識點，就是當我們向頁面添加新的元素之后，加載之前的函數(shù)方法就對新元素失效了，下面我來說說如何解決這個問題的？

　　我先看jq api文檔沒有找到方法，無果只好到網上找些資料，果然找到live方法。

　　其實很簡單：

　　1.這是項目要求達到的效果，當我沒用live事件，只用了簡單的hover事件時：hover事件沒有加載進來，沒有我想要的邊框效果，效果圖如下

復制代碼代碼如下:

　　/*經過用戶技能標簽增加樣式*/

　　　　$(function(){　　　

　　　　　　$(".s-edited").hover(function(){　　

   　　　　　$(this).toggleClass("borderd");

　　　　　　})

　　　　})

　　　　2.當我用了live之后，效果達到了，如下圖：

　　　　代碼如下：

復制代碼代碼如下:

　　　　/*經過用戶技能標簽增加樣式*/

　　　　$(".s-edited").live("hover",function(){

　　　　　　$(this).toggleClass("borderd");

　　　　})

　　　　我仔細的看了一下關于live的介紹，

　　　　給所有當前以及將來會匹配的元素綁定一個事件處理函數(shù)（比如hover事件）。也能綁定自定義事件。

　　　　PS：我是新手菜鳥，大神勿噴！

以上就是本文的全部內容了，希望大家能夠喜歡。

您可能感興趣的文章:

jQuery實現(xiàn) 注冊時選擇閱讀條款左右移動
本篇文章，小編將為大家介紹jQuery實現(xiàn) 注冊時選擇閱讀條款左右移動，有需要的朋友可以參考一下
2013-04-04
jQuery模擬select實現(xiàn)下拉菜單功能
這篇文章主要介紹了jQuery模擬select實現(xiàn)下拉菜單功能,比較實用,需要的朋友可以參考下。
2016-06-06
Jquery實現(xiàn)仿新浪微博獲取文本框能輸入的字數(shù)代碼
Jquery實現(xiàn)仿新浪微博獲取文本框所能輸入的字數(shù)，感興趣的朋友可以研究一下代碼方便你折騰，希望本文提供的方法可以幫助到你
2013-02-02
jQuery Easyui datagrid editor為combobox時指定數(shù)據源實例
當在datagrid行內部應用添加編輯操作時，引入combobox是非常方便的操作，這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時指定數(shù)據源實例，有興趣的可以了解一下。
2016-12-12
JQuery自定義模態(tài)框效果
這篇文章主要為大家詳細介紹了JQuery自定義模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery自適應輪播圖插件Swiper用法示例
這篇文章主要介紹了jQuery自適應輪播圖插件Swiper用法,結合實例形式分析了jQuery輪播圖插件的功能與具體使用方法,需要的朋友可以參考下
2016-08-08
jQuery插件windowScroll實現(xiàn)單屏滾動特效
本文給大家分享的是一個使用jQuery插件windowScroll實現(xiàn)的單屏滾動的特效，主要參考搜狗瀏覽器4.2版本首頁的上下滾動效果。主要實現(xiàn)整個窗口的上下和左右滾動邏輯，非常的實用。
2015-07-07
jQuery實現(xiàn)table中兩列CheckBox只能選中一個的示例
下面小編就為大家?guī)硪黄猨Query實現(xiàn)table中兩列CheckBox只能選中一個的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網格線效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網格線效果,結合實例形式分析了echarts插件繪制表格圖及圖形相關屬性設置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
基于jquery的從一個頁面跳轉到另一個頁面的指定位置的實現(xiàn)代碼（帶平滑移動的效果）
從一個頁面跳轉到另一個頁面的指定位置如果不帶平滑移動的效果很容易加個錨點就行了
2011-05-05