將數據插入頁面之前觸發的事件（AJAX調用後）

Question

此站點（http://nelation.net/）使用AJAX和pushState加載頁面。 AJAX檢索節＃body的內容和新CSS的路徑。

以下代碼發送AJAX請求，檢索節＃body（頁面內容）的新內容和新的CSS路徑。然後將它們插入到頁面中，然後調用「pageLoad」事件 - 這是我認爲觸發得太早的事件。

function loadPage(url) { 
    var target = document.getElementById("body"); 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState < 4) { 
      target.innerHTML = ""; 
     } 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      // Function to decode the new page 
      var decodeEntities = (function() { 
       // this prevents any overhead from creating the object each time 
       var element = document.createElement('div'); 
       function decodeHTMLEntities (str) { 
        if(str && typeof str === 'string') { 
         // strip script/html tags 
         str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, ''); 
         str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); 
         element.innerHTML = str; 
         str = element.textContent; 
         element.textContent = ''; 
        } 
        return str; 
       } 
       return decodeHTMLEntities; 
      })(); 

      var resultJSON = JSON.parse(xhr.responseText); 
      var page = decodeEntities(resultJSON.page); 
      // Remove existing CSS and insert new one 
      $(".page-css").remove(); 
      if (resultJSON.css != "none") { 
       $("<link/>", { 
        "class": "page-css", 
        rel: "stylesheet", 
        type: "text/css", 
        href: resultJSON.css 
       }).appendTo("head"); 
      } 
      // Insert page contents, then trigger the pageLoad event 
      $(target).html(page); 
      $("body").trigger("pageLoad"); 
     } 
    }; 
    xhr.send(); 
} 
// Detect link clicks, and make AJAX calls out of them + pushState. 
$("body").on("click", '[data-ajax="true"]', function(event) { 
    event.preventDefault(); 
    // detect which page has been selected 
    var newPage = $(this).attr("href"); 
    if (newPage != window.location) { 
     window.history.pushState({path: newPage}, "", newPage); 
    } 
    loadPage(newPage); 
}); 

在此腳本中找到「pageLoad」事件處理程序。它會重新執行大部分腳本，如果您在主頁中，最重要的是中心PlayButton_Featured（）函數。該功能調整了將圖像懸停在主頁上時看到的疊加層;當你正常加載頁面時它工作正常，但是當你通過AJAX訪問頁面時不會。該函數仍在執行（記錄到控制檯），但我懷疑它在內容正確加載到頁面之前執行。

// DOES NOT RE-EXECUTE ON AJAX 
function centerPlayButton_Featured() { 
    console.log("centerPlayButton_Featured() just executed"); 
    var coverWidth = $("section.home-latest-release img.cover").width(); 
    var coverHeight = $("section.home-latest-release img.cover").height(); 
    $("section.home-latest-release div.cover-overlay").css({ 
     "height": coverWidth + "px", 
     "width": coverHeight + "px" 
    }); 
} 

$("body").click(function(e) { 
    if ($(e.target).hasClass("dropdown-text")) { 
     if ($(e.target).siblings(".menu").hasClass("open")) { 
      $(e.target).siblings(".menu").removeClass("open"); 
      $(e.target).removeClass("open"); 
     } else { 
      $(".dropdown .menu, .dropdown .dropdown-text").removeClass("open"); 
      $(e.target).siblings(".menu").addClass("open"); 
      $(e.target).addClass("open"); 
     } 
    } else { 
     $(".dropdown .menu, .dropdown .dropdown-text").removeClass("open"); 
    } 
}); 
// RE-EXECUTES ON AJAX 
$("body").on("pageLoad", function() { 
    $(function() { 
     // HOME PAGE 
     if ($("#body").children().hasClass("home-latest-release")) { 

      centerPlayButton_Featured(); 
      $(window).on('resize', function() { 
       centerPlayButton_Featured(); 
      }); 

     } 
     // MUSIC PAGE 
     if ($("#body").children().hasClass("music-tracks")) { 

      //... 

     } 
     // CONTACT PAGE 
     $(function() { 
      if ($("#body").children().hasClass("contact")) { 

       $("textarea").bind("input", function() { 
        var offset = this.offsetHeight - this.clientHeight; 
        $(this).css("height", "auto").css("height", this.scrollHeight + offset); 
       }); 

      } 
     }); 
    }); 
}); 
$("body").trigger("pageLoad"); 

我感謝任何幫助/反饋。轉到鏈接查看更多代碼，並告訴我是否需要查看後端。我很抱歉，如果代碼混亂和評論缺乏。非常感謝你的幫助。

我遇到的另一個問題是當您進入音樂頁面時，您可能會看到所有下拉菜單消失。不是最主要的問題是重要的，但幫助將不勝感激:)

Answer 1

1. 的pageLoad事件沒有被觸發，因爲它綁定到窗口load事件：在

   $(window).bind("load", function() { 
        $("body").trigger("pageLoad"); 
       }); 
   

   load只發生一次一個窗口的生命週期，並且這個時間早已過去，甚至可以開始一個ajax請求。直接觸發pageLoad。

2. $(function() {...})在DOM完成加載時執行一次。實際上，您正在使用相同的事件load來執行兩次代碼，只發生一次。直接在pageLoad事件處理程序中執行您的設置代碼。我會寫這樣的：

   function pageSetup() { 
       // HOME/MUSIC/CONTACT PAGE setup code 
   } 
   
   $("body").on("pageLoad", pageSetup); 
   pageSetup();