jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析

更新時(shí)間：2019年05月04日 17:49:17 作者：無痕之意

這篇文章主要介紹了jQuery動(dòng)態(tài)生成的元素綁定事件操作,結(jié)合實(shí)例形式分析了jQuery事件綁定的原理及動(dòng)態(tài)生成的元素綁定事件相關(guān)操作技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jquery原理以及學(xué)習(xí)技巧介紹
JQuery上手簡單，也很容易學(xué)，即使是剛接觸JQuery的開發(fā)人員，借助JQuery手冊(cè)，也很快能在項(xiàng)目中使用開發(fā)，這篇文章針對(duì)jquery原理以及學(xué)習(xí)技巧進(jìn)行介紹，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery中removeData()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeData()方法用法,實(shí)例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉(zhuǎn)問題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過期后的ajax操作的相關(guān)資料,需要的朋友可以參考下
2016-06-06
Jquery樹插件zTree實(shí)現(xiàn)菜單樹
這篇文章主要為大家詳細(xì)介紹了Jquery樹插件zTree實(shí)現(xiàn)菜單樹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery實(shí)現(xiàn)tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery判斷元素是否顯示是否隱藏的簡單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示是否隱藏的簡單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法,可實(shí)現(xiàn)點(diǎn)擊導(dǎo)航菜單選項(xiàng)時(shí)動(dòng)態(tài)變換對(duì)應(yīng)選中項(xiàng)樣式的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery事件 delegate()使用方法介紹
delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)
2012-10-10
jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多，但是這個(gè)輪子我還是繼續(xù)做一個(gè)，因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過來的（我已慢慢投入jQuery的懷抱），并且它的驗(yàn)證規(guī)則書寫方式也許會(huì)讓你眼前一亮。
2009-12-12