jQuery如何獲取動(dòng)態(tài)添加的元素

更新時(shí)間：2016年06月24日 10:17:33 作者：tt_yang

這篇文章主要介紹了jQuery如何獲取動(dòng)態(tài)添加的元素的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、問(wèn)題描述

　　用jQuery的append()方法動(dòng)態(tài)添加了一段html代碼之后，發(fā)現(xiàn)在為新添加的元素綁定click事件時(shí)無(wú)法獲取該新元素。

二、解決方法

　　度娘推薦的方法基本是用live()方法

　　live()的官方定義和用法:

　　live() 方法為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。通過(guò) live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。

　　live()的詳細(xì)使用方法可以查看jQuery live()

　live()和bind()的區(qū)別就是live不僅可以給頁(yè)面中現(xiàn)有的元素綁定事件，還可以給將來(lái)動(dòng)態(tài)添加進(jìn)來(lái)的元素綁定時(shí)間。

　　于是我用live()替換了bind(),但報(bào)出了新錯(cuò)誤：TypeError: $(...).live is not a function

　　經(jīng)過(guò)查詢以后發(fā)現(xiàn)，原來(lái)是jQuery 1.9及其以上已經(jīng)無(wú)法使用live（），可以用on()方法代替live().

　　on()的官方定義和用法:

　　on() 方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

　　注意：使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。

　　on()的詳細(xì)使用方法可以查看jQuery on()

三、代碼演示

html頁(yè)面：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery on()方法測(cè)試</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),再找到動(dòng)態(tài)添加的選擇器（.new)
  $("p").on("click",".new",function(){
　　　　$(this).remove();
  });
});

　　test.js中第6行實(shí)現(xiàn)了為動(dòng)態(tài)添加的.new元素綁定click事件。應(yīng)注意的是，雖然是為.new綁定事件，但on()方法卻是綁定在原選擇器<p>上的，然后將.new放在了參數(shù)列表中，原理參照上文on()的官方定義和用法。

　　以上便是所有內(nèi)容，如有需要修改或補(bǔ)充的地方，歡迎交流。

您可能感興趣的文章: