jQuery如何獲取動態新增的元素

1. 使用 on()方法

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

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

下例為選項卡：

父元素： .main .left

子元素：

$("父元素").on("click","子元素",function());
$(this).css();
$(".main .left").find('li').hide();
$(".main .left").find('li').eq(index).show();
});

2. on()可以獲取動態元素，必須有事件delegate() 可以獲取動態元素，可以沒事件live() 可以獲取動態元素，jquery 1.9已棄用，必須有事件bind() 只能獲取靜態元素，不能獲取動態元素，必須有事件

一、問題描述

二、解決方法

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

live() 方法為被選元素附加乙個或多個事件處理程式，並規定當這些事件發生時執行的函式。通過 live() 方法附加的事件處理程式適用於匹配選擇器的當前及未來的元素（比如由指令碼建立的新元素）。

live()的詳細使用方法可以檢視jquery live()

live()和bind()的區別就是live不僅可以給頁面中現有的元素繫結事件，還可以給將來動態新增進來的元素繫結事件。

於是我用live()替換了bind(),但報出了新錯誤：typeerror: $(...).live is not a function

經過查詢以後發現，原來是jquery 1.9及其以上已經無法使用live（），可以用on()方法代替live().

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

on() 方法在被選元素及子元素上新增乙個或多個事件處理程式。自 jquery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

注意：使用 on() 方法新增的事件處理程式適用於當前及未來的元素（比如由指令碼建立的新元素）。

on()的詳細使用方法可以檢視jquery on()

三、**演示

html頁面：12

3456

78910

1112

click me!

hello,

test.js：12

3456

789$().ready(function());

//on方法要先找到原選擇器（p),再找到動態新增的選擇器（.new)

$("p").on("click",".new",function());

});

test.js中第6行實現了為動態新增的.new元素繫結click事件。應注意的是，雖然是為.new繫結事件，但on()方法卻是繫結在原選擇器上的，然後將.new放在了引數列表中，原理參照上文on()的官方定義和用法。