小編給大家分享一下Jquery中動態(tài)添加元素并添加點(diǎn)擊事件的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專注于會澤企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),成都商城網(wǎng)站開發(fā)。會澤網(wǎng)站建設(shè)公司,為會澤等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

給動態(tài)添加的元素添加js事件，不能直接添加js事件，需要借助on( )方法，給選擇器指定的子元素添加事件處理函數(shù)，并非選擇器本身；

1. 語法

$(selector).on(event,childSelector,data,function)
// event _ 需要添加的js事件
//childSelector _ 只能添加到指定的子元素上的事件處理程序
//data _ 調(diào)用函數(shù)時(shí)需要傳遞的參數(shù)
// function _ js函數(shù)發(fā)生時(shí)觸發(fā)的事件

2. 實(shí)例

//html代碼
<div id="div1" ></div> 
<script type="text/javascript">
  //在id為div_link的元素中動態(tài)追加a
  $("#div1").html('<a id="div_link">鏈接點(diǎn)擊</a>');
  //觸發(fā)通過js動態(tài)添加的超鏈接a
  $("#div1").on("click", "#div_link", function(){
   //點(diǎn)擊id為div_link時(shí)調(diào)用的處理函數(shù)
  });
</script>

3. 相關(guān)概念：事件冒泡、事件捕獲，默認(rèn)為事件冒泡

事件冒泡：從子元素到祖先元素觸發(fā)事件的執(zhí)行； 子元素綁定了click事件，當(dāng)點(diǎn)擊子元素時(shí)，瀏覽器會向上查找綁有click事件的父、祖先元素，如有就執(zhí)行；默認(rèn)為事件冒泡；

事件捕獲：從點(diǎn)擊的元素到子元素執(zhí)行觸發(fā)的相同的事件；當(dāng)某個(gè)元素中綁定了click事件時(shí)，點(diǎn)擊此元素，瀏覽器會向下查找綁有click事件的子、后代元素，如有就執(zhí)行點(diǎn)擊事件；

代碼：

 //第一個(gè)參數(shù)：所綁定的事件；
 //第二個(gè)參數(shù)：觸發(fā)事件后執(zhí)行的方法；
 //第三個(gè)參數(shù)：決定是事件冒泡-false還是事件捕獲-true；默認(rèn)為false-事件冒泡；
 elem.addEventListener("click", function(){

     ......
   }, boolean);

看完了這篇文章，相信你對“Jquery中動態(tài)添加元素并添加點(diǎn)擊事件的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：Jquery中動態(tài)添加元素并添加點(diǎn)擊事件的示例分析
路徑分享：http://jinyejixie.com/article14/pgcpge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、電子商務(wù)、靜態(tài)網(wǎng)站、定制開發(fā)、自適應(yīng)網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)