如何在jQuery .load（）之後更新DOM？

我想從模板文件（b.xhtml）加載html內容，將其插入調用文件（a.xhtml），然後更新插入的節點（例如添加/刪除屬性等）。如何在jQuery .load（）之後更新DOM？

插入部分工作正常，但DOM似乎並沒有得到更新。

這裏是測試用例。

a.xhtml（調用HTML文件）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
       $("#placeholder").load("b.xhtml #id2"); 
       // why doesn't this work? 
       var myTemp = document.querySelector("#id2"); 
       if (myTemp) { 
        alert(myTemp.innerHTML); 
       } else { 
        alert("#id2 is undefined"); 
       }; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>jQuery load test</h1> 
    <div><button>Load template</button></div> 
    <div id="placeholder"></div> 
</body> 
</html>

b.xhtml（模板HTML文件）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
    <div id="templates"> 
     <p id="id1">This is template one</p> 
     <p id="id2">This is template two</p> 
    </div> 
</body> 
</html>

如何後更新DOM .load（）？
有沒有更容易的方法從外部HTML文件中插入HTML節點來自動更新DOM？
或者，如何在b.xhtml插入a.xhtml之前（或之後）更改或添加節點的屬性？例如，我將如何向＃id2節點添加alt =「template text」屬性？

來源

2016-07-01 Nemo XXX

使用'負載（）'完成回調，因爲它是異步的。 –

在DOM中插入新元素將觸發一個（原文如此）'reflow'，它將在當前腳本停止執行後運行。因此，當您嘗試選擇它時，元素不在DOM中。如下所述使用回調，這將只在迴流完成後觸發。或者使用延遲來重排隊列中的javascript，這或多或少都是一樣的。（如果我沒有錯，這就是jquery會在後臺執行的操作。） – Shilly

.load（）方法是異步的，所以你的腳本正在執行那一行，但是在它進入下一行之前並沒有等待它完成。你可以做幾件事情。首先，使用一個回調函數：

$("#placeholder").load("b.xhtml #id2", function(){ 
      var myTemp = document.querySelector("#id2"); 
      if (myTemp) { 
       alert(myTemp.innerHTML); 
      } else { 
       alert("#id2 is undefined"); 
      }; 
});

或者，使用.done（）：

$("#placeholder").load("b.xhtml #id2").done(function(){ 
      var myTemp = document.querySelector("#id2"); 
      if (myTemp) { 
       alert(myTemp.innerHTML); 
      } else { 
       alert("#id2 is undefined"); 
      }; 
});

來源

2016-07-01 13:48:43 Cruiser

感謝您的快速回答！ –

我試圖使用.done方法，但我得到的錯誤'Uncaught TypeError：$（...）.load（...）。done不是一個函數「 - 任何想法？我使用的是jQuery 3.1.0。這條線是'$（「#song」）.load（「http://kvrx.org＃track-name：eq（0）」）。done（function（）{track ['trackTitle'] = song .innerHTML}）;' - 我試圖更新一個對象（定義在這條線的上方）trackTitle屬性。 –

嘗試做這樣的：

<script> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
       $("#placeholder").load("b.xhtml #id2",function() 
       { 
        var myTemp = document.querySelector("#id2"); 
        if (myTemp) { 
         alert(myTemp.innerHTML); 
        } else { 
         alert("#id2 is undefined"); 
        }; 
       }); 
      }); 
     }); 
    </script>

來源

2016-07-01 13:49:10 Jojo01

感謝您的回答，但**巡洋艦**比您快一分鐘，並提供了兩種解決方案。 :-( –

如何在jQuery .load（）之後更新DOM？

回答

相關問題