jquery html動態(tài)添加的元素綁定事件詳解

更新時間：2016年05月24日 10:30:37 投稿：jingxian

下面小編就為大家?guī)硪黄猨query html動態(tài)添加的元素綁定事件詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在實際開發(fā)中會遇到要給動態(tài)生成的html元素綁定觸發(fā)事件的情況：

<div id="testdiv">
  <ul></ul>
</div>

假設(shè)我們要給ul動態(tài)添加的<li>綁定click事件形成如下結(jié)果

<div id="testdiv">
  <ul>

   <li name="apple">apple</li>
   <li name="pear">pear</li>

  </ul>
</div>
<script>

function test(name){
  alert("I'm "+name);

}

//做法如下:

$("#testdiv ul").on("click","li", function() {
  //test($(this).attr("name"));
  //do something here
});

//主動觸發(fā)某個<li>的click事件

// $("#testdiv ul li[name='apple']").trigger("click");

</script>

以上這篇jquery html動態(tài)添加的元素綁定事件詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery常用操作方法及常用函數(shù)總結(jié)
這篇文章主要總結(jié)了jQuery 常用操作方法及常用函數(shù),需要的朋友可以參考下
2014-06-06
jquery實現(xiàn)圖片輪播和滑動效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片輪播和滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
Confirmer JQuery確認對話框組件
點擊鏈接或按鈕時要確認是否繼續(xù)當(dāng)前操作。
2010-06-06
jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框
jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框使用介紹，需要的朋友可以參考下。
2011-10-10
jQuery實現(xiàn)彈幕效果案例
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)彈幕效果案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
npm 安裝jquery及使用教程
本文將介紹如何使用npm安裝和使用jQuery,幫助讀者解決相關(guān)問題,并提供示例代碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
jQuery中過濾器的基本用法示例
這篇文章主要介紹了jQuery中過濾器的基本用法,結(jié)合簡單實例形式分析了jQuery過濾器針對table表格元素屬性進行判斷與設(shè)置的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jQuery插件echarts實現(xiàn)的單折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的單折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制簡單折線圖的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery控制圖片由中心點逐漸放大效果
這篇文章主要介紹了JQuery控制圖片由中心點逐漸放大效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
jQuery 開發(fā)者應(yīng)該注意的9個錯誤
jQuery 開發(fā)者應(yīng)該注意的9個錯誤,使用jquery的朋友可以參考下
2012-05-05