快捷導(dǎo)航

jQuery獲取動態(tài)添加元素的方法詳解

更新時間：2023年08月08日 09:35:20 作者：wkj001

這篇文章主要介紹了jQuery獲取動態(tài)添加元素的方法詳解,jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單,需要的朋友可以參考下

jQuery獲取動態(tài)添加的元素

使用 on()方法

本質(zhì)上使用了事件委派，將事件委派在父元素身上

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，但是由于on()方法必須有事件，沒有事件時可選擇delegate()；

下例為選項(xiàng)卡：

父元素： .main .left

子元素： li

$("父元素").on("click","子元素",function(){
    var index=$(this).index();
    $(".main .right").find('li').css({"background":"#F4F4F4","color":"#333"});
    $(this).css({"background":"#fff","color":"#46c6ff"});
    $(".main .left").find('li').hide();
    $(".main .left").find('li').eq(index).show();
});

on()可以獲取動態(tài)元素，必須有事件

delegate() 可以獲取動態(tài)元素，可以沒事件
live() 可以獲取動態(tài)元素，jQuery 1.9已棄用，必須有事件
bind() 只能獲取靜態(tài)元素，不能獲取動態(tài)元素，必須有事件

問題描述

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

解決方法

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

live() 方法為被選元素附加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運(yùn)行的函數(shù)。

通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。

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

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

于是我用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() 方法添加的事件處理程序適用于當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。

在這里插入圖片描述

on()的詳細(xì)使用方法可以查看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行實(shí)現(xiàn)了為動態(tài)添加的.new元素綁定click事件。應(yīng)注意的是，雖然是為.new綁定事件，但on()方法卻是綁定在原選擇器

上的，然后將.new放在了參數(shù)列表中，原理參照上文on()的官方定義和用法。

到此這篇關(guān)于jQuery獲取動態(tài)添加元素的方法詳解的文章就介紹到這了,更多相關(guān)jQuery獲取動態(tài)元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: