jQuery如何獲取動態(tài)添加的元素
一、問題描述
用jQuery的append()方法動態(tài)添加了一段html代碼之后，發(fā)現(xiàn)在為新添加的元素綁定click事件時無法獲取該新元素。
二、解決方法
度娘推薦的方法基本是用live()方法
live()的官方定義和用法:
live() 方法為被選元素附加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創(chuàng)建的新元素）。
live()的詳細使用方法可以查看jQuery live()
live()和bind()的區(qū)別就是live不僅可以給頁面中現(xiàn)有的元素綁定事件，還可以給將來動態(tài)添加進來的元素綁定時間。
于是我用live()替換了bind(),但報出了新錯誤：TypeError: $(...).live is not a function
經(jīng)過查詢以后發(fā)現(xiàn)，原來是jQuery 1.9及其以上已經(jīng)無法使用live（），可以用on()方法代替live().
on()的官方定義和用法:
on() 方法在被選元素及子元素上添加一個或多個事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
注意：使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創(chuàng)建的新元素）。
on()的詳細使用方法可以查看jQuery on()
三、代碼演示
html頁面：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery on()方法測試</title> </head> <body> <button id="click1">Click me!</button> <p>Hello,</p> <script src="js/jquery.min.js"></script> <script src="js/test.js"></script> </body> </html>
test.js：
$().ready(function(){
$("#click1").bind("click",function(){
$("p").append("<div class='new'><b>I'm clicked!</b></div>");
});
//on方法要先找到原選擇器（p),再找到動態(tài)添加的選擇器（.new)
$("p").on("click",".new",function(){
$(this).remove();
});
});
test.js中第6行實現(xiàn)了為動態(tài)添加的.new元素綁定click事件。應(yīng)注意的是，雖然是為.new綁定事件，但on()方法卻是綁定在原選擇器<p>上的，然后將.new放在了參數(shù)列表中，原理參照上文on()的官方定義和用法。
以上便是所有內(nèi)容，如有需要修改或補充的地方，歡迎交流。
相關(guān)文章
在開發(fā)項目過程中，用iframe嵌套，會發(fā)現(xiàn)一個問題，用iframe嵌套的html結(jié)構(gòu)右邊不會自動適應(yīng)高度。如何解決這一問題呢，下面就跟小編一起來看下吧2016-12-12
這篇文章主要為大家分享了7個jQuery最佳實踐，在使用JavaScript庫的時候，有哪些最佳實踐，又有哪些不好的實踐呢？感興趣的小伙伴們可以參考一下2016-01-01
這兩天突發(fā)奇想，結(jié)果就做了一個jQ的tip插件，形狀就像下面這樣。會隨title的多少改變大小的喲.2010-11-11
jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實例形式較為詳細分析了jQuery結(jié)合ajax進行表單登陸驗證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
在github的項目地址里有關(guān)于pjax的詳細說明和使用方法，這里不再贅述，本文主要是使用中的一些代碼記錄和使用心得，方便以后查閱快速上手使用。2017-04-04
本篇文章主要介紹了jquery仿蘋果的時間/日期選擇效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
淺談$(document)和$(window)的區(qū)別
本人在做項目的時候遇到$(document)，$(window)這兩種寫法立馬讓我蒙圈了，那么他們的區(qū)別是什么呢，在網(wǎng)友的幫助下，徹底了解了他們的區(qū)別，這里分享給大家。2015-07-07
jQuery異步上傳文件插件ajaxFileUpload詳細介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯誤提示等知識,然后給出了簡單使用實例和ASP.NET MVC模式下的使用實例,需要的朋友可以參考下2015-05-05
JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03