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

1. 語法

$(selector).on(event,childSelector,data,function)

// event _  需要添加的js事件
//childSelector _  只能添加到指定的子元素上的事件處理程序
//data _  調用函數時需要傳遞的參數
// function _ js函數發生時觸發的事件

2. 實例

//html代碼

<div id="div1" style="border:1px solid black;"></div>  



<script type="text/javascript">

    //在id為div_link的元素中動態追加a
    $("#div1").html(‘<a id="div_link">鏈接點擊</a>‘);

    //觸發通過js動態添加的超鏈接a
    $("#div1").on("click", "#div_link", function(){

      //點擊id為div_link時調用的處理函數

    });

</script>
 

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

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

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

• 代碼：

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

         ......
      }, boolean); 
 

Jquery 給動態添加元素添加點擊事件