jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析
本文實(shí)例講述了jQuery動(dòng)態(tài)生成的元素綁定事件操作。分享給大家供大家參考,具體如下:
這段時(shí)間在寫代碼的時(shí)候遇到一個(gè)問題,通過append()添加的節(jié)點(diǎn),點(diǎn)擊事件不起作用。當(dāng)時(shí)我百思不得其解,各種找錯(cuò)都沒找到錯(cuò)誤的原因。后來才發(fā)現(xiàn)是動(dòng)態(tài)生成節(jié)點(diǎn)的問題,還是自己沒有經(jīng)驗(yàn)啊。
下面來總結(jié)一下這個(gè)問題的始末,溫故而知新。
先看下click綁定事件的效果。
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
創(chuàng)建一個(gè)按鈕來生成新的節(jié)點(diǎn)p
<button>create</button>
綁定點(diǎn)擊事件
<script>
//添加點(diǎn)擊事件
$("p").click(function(){
$(this).text('click');
})
//創(chuàng)建一個(gè)新節(jié)點(diǎn)
$("button").click(function(){
var p ="<p>new</p>";
$("div").append(p);
})
</script>
點(diǎn)擊第一p元素,事件生效,運(yùn)行結(jié)果:

點(diǎn)擊按鈕,生成新的節(jié)點(diǎn),并點(diǎn)擊新的節(jié)點(diǎn),運(yùn)行結(jié)果:

結(jié)果證明,click并沒有綁定到新的節(jié)點(diǎn)上。
如果需要給動(dòng)態(tài)的元素綁定事件,需要使用到on()。
$("div").on("click","p",function(){
$(this).text('click');
})
on()方法,可以給未來的元素綁定事件
使用方法:
1、先選中動(dòng)態(tài)生成元素的父元素
2、然后綁定事件
3、再選中子類
可以理解為給div下的p元素包括未來的p元素綁定click事件,這是比較通俗易懂的理解,詳細(xì)內(nèi)容可以看文檔的具體說明
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery快捷動(dòng)態(tài)綁定鍵盤事件的操作函數(shù)代碼
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
- jQuery 相關(guān)控件的事件操作分解
- jQuery級(jí)聯(lián)操作綁定事件實(shí)例
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- Jquery基礎(chǔ)之事件操作詳解
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
- 詳解Jquery的事件操作和文檔操作
- jQuery隨手筆記之常用的jQuery操作DOM事件
- jQuery操作事件完整實(shí)例分析
相關(guān)文章
Jquery如何使用animation動(dòng)畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動(dòng)畫效果改變背景色,需要的朋友可以參考下2020-07-07
jQuery點(diǎn)擊后一組圖片左右滑動(dòng)的實(shí)現(xiàn)代碼
主要是用作圖片展示的時(shí)候需要,點(diǎn)擊后一組圖片左右滑動(dòng),需要的朋友可以參考下2012-08-08
JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個(gè)工程,不知道為什么Search按就總是執(zhí)行兩次。2010-01-01
jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能示例
這篇文章主要介紹了jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換,以及ajax后臺(tái)動(dòng)態(tài)交互相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
Jquery時(shí)間驗(yàn)證和轉(zhuǎn)換工具小例子
這篇文章介紹了Jquery時(shí)間驗(yàn)證和轉(zhuǎn)換工具小例子,有需要的朋友可以參考一下2013-07-07
Jquery:ajax實(shí)現(xiàn)翻頁無刷新功能代碼
ajax實(shí)現(xiàn)翻頁在實(shí)際應(yīng)用中還是比較常見的,實(shí)現(xiàn)ajax翻頁有兩部分:js部分、html部分,具體如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08
jQuery animate(滑塊滑動(dòng)效果代碼)
jQuery animate 滑塊滑動(dòng)效果,學(xué)習(xí)jquery的朋友可以看下。2010-01-01

