Jquery中怎么動態(tài)添加元素并添加點擊事件

本文小編為大家詳細介紹“Jquery中怎么動態(tài)添加元素并添加點擊事件”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Jquery中怎么動態(tài)添加元素并添加點擊事件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

1. 語法

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

2. 實例

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

3. 相關概念：事件冒泡、事件捕獲，默認為事件冒泡

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

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

代碼：

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

     ......
   }, boolean);

讀到這里，這篇“Jquery中怎么動態(tài)添加元素并添加點擊事件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道。