JQuery關於如何為動態新增元素繫結事件

2021-10-03 17:34:24 字數 1439 閱讀 5658

頭部:

"utf-8"

>

<

/title>

// ***************===style可以忽略,這裡只是為了能夠看清做的簡單樣式***************=

div.test

<

/style>

// ******************************= 這裡是原始寫法 *************************====

"js/jquery-1.12.4.min.js"

>

<

/script>

$(function()

);// 為 id="d1" 下的所有標籤中 input標籤是按鈕 的元素繫結刪除事件$(

"#d1 div input[type = button]").

click

(function()

);})

;<

/script>

<

/head>

"d1"

class

="test"

>

"bt1" type=

"button" value=

"增加新的div"

/>

固定div:"button" value=

"刪除當前按鈕"

/>

<

/div>

<

/div>

<

/body>

可以看到,在**中我 為id="d1" 的元素下的所有標籤中input標籤是按鈕的元素繫結刪除事件。對於原本就有的按鈕,刪除事件是可以觸發的,但對於新增的按鈕,沒辦法觸發給按鈕繫結的刪除事件。

jquery的事件繫結在頁面載入時就已經完成,所以之後動態新增的class將無法綁上事件

使用on() 方法新增的事件適用於當前及未來的元素(比如動態新增的新元素)。

on()方法的使用格式:$(selector).on(events,childselector,data,function)方法解釋:

$(

function()

);// 改進的地方$(

"#d1").

on("click"

,"div input[type = button]"

,function()

);})

;<

/script>

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

1.使用 on 方法 本質上使用了事件委派,將事件委派在父元素身上 自 jquery 版本 1.7 起,on 方法是 bind live 和 delegate 方法的新的替代品,但是由於on 方法必須有事件,沒有事件時可選擇delegate 下例為選項卡 父元素 main left 子元素 li 父...

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

1.使用 on 方法 本質上使用了事件委派,將事件委派在父元素身上 自 jquery 版本 1.7 起,on 方法是 bind live 和 delegate 方法的新的替代品,但是由於on 方法必須有事件,沒有事件時可選擇delegate 下例為選項卡 父元素 main left 子元素 li 父...

jQuery動態新增html

在日常 web 開發中,經常遇到需要操作html dom 今天我們來總結下通過jquery來動態新增 html 首先我們來對這些方法做個總結 01 html html 函式的作用原理是先移除匹配元素內部的html 然後將新的html新增到匹配元素 設定內容 當使用該方法返回乙個值時,它會返回第乙個匹...