js動態append添加的節點點擊事件無效

js動態append添加的節點點擊事件無效

問題
js的append動態添加節點，添加後節點中的點擊點擊時無效，
原代碼是：

//點擊事件執行的方法定義
function downLoadFunction(attachmentId) {
   window.location.href="/doFile/download/?attachmentId="+attachmentId;
}
$.ajax({
      type:"post",
      url:"/" + PROJECT_NAME + "/landAttachmentAction/selectAttachmentByRelatedIds.do",
      data:params,
      dataType:"json",
      success:function(result){
          if(result.data){
              var data=result.data;
              var imgList=$("#imgList");
              //ajax請求成功後遍歷數組添加新節點
              for(var i=0;i<data.length;i++){
              $("#imgList").append("<img src='/doFile/download/?attachmentId="+data[i].fileId+"' style='max-height: 800px;max-width:800px'/><br/>")
              $("#imgList").append("<a onclick='downLoadFunction("+data[i].fileId+")'  href='#' style='font-size: 16px;text-decoration-line: underline'>"+data[i].fileName+"（點擊下載）</a><br/><br/>")
               }
         }
     }
})

頁面的顯示如圖：

這時候點擊這裏的文件名並沒有調用點擊事件

爲什麼呢？

原因：
後來瞭解了一下發現，是因爲append中的節點是在整個文檔加載後才添加的，頁面並不會爲未來的元素初始化添加點擊事件，所以使用這種方式動態添加的節點中的點擊事件沒有生效。

解決方法：
後來用事件委託的方法解決

//爲所有類爲imgItem的節點添加事件，$(document).on("click","指定的元素",function(){});是將指定的事件綁定在document上，只要而新產生的元素符合指定的元素，就會綁定此事件  ，而且這種方法當頁面需要爲多個節點初始化事件的時候，就不需要一個個加onclick事件
        $(document).on("click",".imgItem",function(){
            var fileId=$(this).attr("fileId")
            downLoadFunction(fileId);
        })
$.ajax({
      type:"post",
      url:"/" + PROJECT_NAME + "/landAttachmentAction/selectAttachmentByRelatedIds.do",
      data:params,
      dataType:"json",
      success:function(result){
          if(result.data){
              var data=result.data;
              var imgList=$("#imgList");
              for(var i=0;i<data.length;i++){
              $("#imgList").append("<img src='/doFile/download/?attachmentId="+data[i].fileId+"' style='max-height: 800px;max-width:800px'/><br/>")
                        $("#imgList").append("<a fileId='"+data[i].fileId+"' class='imgItem' id='img"+i+ "' href='#' style='font-size: 16px;text-decoration-line: underline'>"+data[i].fileName+"（點擊下載）</a><br/><br/>")
               }
         }
     }
})

問題延伸：
在解決問題的時候，遇到另一個問題，我在每個新節點中加入一個id，然後爲這個節點添加事件，如下：

$("#img"+i).on("click",function (){
         downLoadFunction(data[i].fileId);
})

但是沒有生效，原因是：

知識拓展：
這是因爲on()函數並不是爲當前jQuery對象匹配的元素綁定事件處理函數，而是爲它們的後代元素中符合選擇器selector參數的元素綁定事件處理函數。on()函數並不是直接爲這些後代元素挨個綁定事件，而是委託給當前jQuery對象的匹配元素來處理。由於DOM 2級的事件流機制，當後代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會判斷是哪個後代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行綁定的事件處理函數。

拓展閱讀
jQuery.on() 函數詳解
關於DOM2級事件的事件捕獲和事件冒泡