您好,登錄后才能下訂單哦!
本文實例講述了jQuery動態生成的元素綁定事件操作。分享給大家供大家參考,具體如下:
這段時間在寫代碼的時候遇到一個問題,通過append()添加的節點,點擊事件不起作用。當時我百思不得其解,各種找錯都沒找到錯誤的原因。后來才發現是動態生成節點的問題,還是自己沒有經驗啊。
下面來總結一下這個問題的始末,溫故而知新。
先看下click綁定事件的效果。
<div> <p>a</p> <p>b</p> <p>c</p> </div>
創建一個按鈕來生成新的節點p
<button>create</button>
綁定點擊事件
<script> //添加點擊事件 $("p").click(function(){ $(this).text('click'); }) //創建一個新節點 $("button").click(function(){ var p ="<p>new</p>"; $("div").append(p); }) </script>
點擊第一p元素,事件生效,運行結果:
點擊按鈕,生成新的節點,并點擊新的節點,運行結果:
結果證明,click并沒有綁定到新的節點上。
如果需要給動態的元素綁定事件,需要使用到on()。
$("div").on("click","p",function(){ $(this).text('click'); })
on()方法,可以給未來的元素綁定事件
使用方法:
1、先選中動態生成元素的父元素
2、然后綁定事件
3、再選中子類
可以理解為給div下的p元素包括未來的p元素綁定click事件,這是比較通俗易懂的理解,詳細內容可以看文檔的具體說明
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。