如何確保加載的文件可以被js代碼檢測到

Question

我在文件assets/URL.js中有這段代碼：

$(function(){
    $("a").on("click", function () {
        event.preventDefault();
        var TheURL = $(this).attr('href');
        if(TheURL){
            $("#MyDiv").load(TheURL , { name: '' }, 
                function() {
                    alert("done");
                });
        }
    });
});

它的作用是，如果單擊<a>元素，上面的 function 會阻止頁面轉到該頁面，然后它會獲取 url 並將其加載到具有 id MyDiv的div中。

現在這是index.html的代碼：

<html>
  <head>
    <script type="text/javascript" src="assets/URL.js?v=1"></script>
  </head>
  <body>
    <div id="MyDiv">
      <a href="files/1.html"></a>
    </div>
  </body>
</html>

files/1.html的代碼為：

<a href="2.html">2</a>

現在，當我單擊文件index.html中的<a>時，ID 為MyDiv的<div>的內容會更改file/1.html的內容，而無需重新加載頁面。

但是，當我在文件file/1.html中單擊<a>時，頁面會重新加載並轉到file/2.html並且不遵循assets/URL.js中的代碼，我該如何強制它遵循它並且只是用 id MyDiv替換<div>的內容？

Answer 1

加載動態 html 時，您需要再次設置事件處理程序，現在您只需將點擊事件綁定到 index.html 中現有的 A 標簽，而不是動態加載內容中的未來事件，如 1.ZFC35FDC70D5FC69D253EZAC788

您可以嘗試以下方法：

$(function(){
  RefreshEventHandlers();
});

function RefreshEventHandlers() {
    $("a").on("click", function () {
        event.preventDefault();
        var TheURL = $(this).attr('href');
        if(TheURL){
            $("#MyDiv").load(TheURL , { name: '' }, 
                function() {
                    alert("done");
                    RefreshEventHandlers(); // bind click to newly added A tags.
            });
        }
    });
}

確保在所有新的 A 標記上設置單擊事件處理程序

如何確保加載的文件可以被js代碼檢測到

問題描述

1 個解決方案

解決方案1
2 已采納 2019-11-09 16:10:26

如何確保加載的文件可以被js代碼檢測到

問題描述

1 個解決方案

解決方案1 2 已采納 2019-11-09 16:10:26

解決方案1
2 已采納 2019-11-09 16:10:26