記錄Js動態加載頁面.append、html、appendChild、after、repend添加元素節點不生效以及解決辦法

今天再優化blog頁面的時候添加了個關注按鈕和圖片，但是頁面上這個按鈕和圖片時有時無，本來是搞后端的，被這個前端的小問題搞得抓耳撓腮的！

網上各種查詢解決方案，把我解決問題的艱辛歷程分享出來，希望大家遇到這些問題能少走彎路！

先來看看網上各位大佬的解決方案：
方案一：事件代理
思路：因為最開始他們共同的父級content是在HTML結構中的，所以將兩個單擊事件代理給content，通過單擊獲得的class名來判斷點擊的是哪一個對象，再進行具體操作

$('#content').on('click',function (e) {
    var target=e.target||e.srcElement;//獲取當前點擊的對象
    var cls=target.className;//獲取當前點擊對象的class名
    if(cls==='addcart'){//如果點擊的是加入購物車
       console.log('addcart')
    }else if (cls==='buy') {//如果點擊的是立即購買
       console.log('buy')
    }
});

方案一分析：

        append中的節點是在整個文檔加載后才添加的，頁面並不會為未來的元素初始化添加點擊事件，所以使用這種方式動態添加的節點中的點擊事件不會生效。

         

問題深入探究：

        方案一中的事件代理是可以解決不會顯示的問題，可事件代理有個前提是需要 click 點擊事件來觸發的，而我的頁面是不需要單機事件的，我的頁面一個是div.html(),覆蓋原來的DIV，另一個是

$("#p_b_follow").append(gz); 代碼如下：

<script>
    $(document).on('green_channel', function() { 
        <!--添加打賞-->
        var das= '<img src="https://images.cnblogs.com/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">'; 
        $("#green_channel").html(das); 
    });
     $(document).on('p_b_follow', function() {  
        <!-- 添加關注 -->
        var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" style="color: white !important;">+加關注</a>';  
        $("#p_b_follow").append(gz);
    });
</script>

方案一並不適用！接下來我就找到了

方案二：動態往div中添加元素：

      創建子節點、  父元素動態添加子元素：

            //獲取div  
            var div = document.getElementById("DvelopmentTarget");  
  
            //換行  
            var br = document.createElement("br");  
            div.appendChild(br);  
  
            //添加label ，存放指標名稱  
            var div2 = document.createElement("label");  
            div2.innerText = data[n].QualitativeTargetName;  
            div.appendChild(div2);  
  
            //添加text ，存放指標權重  
            var input = document.createElement("input");  
            input.setAttribute('type', 'text');     
            input.setAttribute('ReadOnly', 'True');  //設置文本為只讀類型  
            input.value = data[n].DevelopmentAllWeight  
            div.appendChild(input);  
              
            //添加select 存放指標id  
            var targetID = document.createElement("select");  
            targetID.innerText = data[n].QualitativeTargetID;  
            targetID.setAttribute('hidden', 'hidden');  
            div.appendChild(targetID);  
            //添加 %(單位百分比)  
  
            //換行  
            var br = document.createElement("br");  
            div.appendChild(br);   

方案二分析：

       這種 appendChild()方法我也試了,仍然沒有任何效果，還是按鈕和圖片時有時無！

       突然想到以前做過Layui 的前端web頁面，里面有一段：

$(document).ready(function() 
{
   //回寫數據
   $("#nameFour").val(other[1]);
   $("#mobileFour").val(other[2]); 
    form.render();
});

       $(document).ready(function() 是加載頁面的時候執行；

        form.render();  Layui頁面的重新渲染；

深入分析：

       既然回寫完數據有form.render(); 頁面的重新渲染，就說明是頁面加載后才會回寫數據，不然也定位不到頁面上的id 元素/節點；$(document).ready(function() 其實是頁面加載過后才開始執行！

       如果是這樣，那我想着在頁面上加載個div 重載？

       然后網上找了半天也沒找到可以用的 div 重載 方法!

       回過頭一想：

       這些方法 .append、html、appendChild、repend... 其實都是在頁面加載完成后才添加的，只有刷新才會更新到頁面當中，所以就有了開頭的按鈕和圖片時有時無的情況！

       然后我就想到了JS的延遲加載，是否可以在頁面加載后，在執行頁面的重寫和覆蓋了？

終極解決方案如下：   

 

<script>
    $(document).on('green_channel', function() { 
        <!--添加打賞-->
        var das= '<img src="https://images.cnblogs.com/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">'; 
        // $("#green_channel").html(das); 
        setTimeout(function(){ $("#green_channel").html(das); }, 300);   
    });
     $(document).on('p_b_follow', function() {  
        <!-- 添加關注 -->
        var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" style="color: white !important;">+加關注</a>';  
       // $("#p_b_follow").append(gz);
        setTimeout(function(){ $("#p_b_follow").append(gz); }, 200);    
    });
</script> 

　　setTimeout(function(){func()，time}方法 延遲執行覆蓋和寫入，完美的解決了Js動態加載頁面.append、html、appendChild、repend等添加元素節點不生效的問題,

       而且也不需要 “單擊事件” 和 “頁面重新渲染”!