AJAX加载页面后JavaScript功能失效问题求助

我是JavaScript和AJAX新手，正在完成Web开发课程项目，卡这个问题很久了，教授也没帮忙。现在做Calgary数据集页面：首页有4个单选按钮，点击后通过AJAX把对应数据页面加载到div里；这些数据页面单独打开时，搜索等JS功能正常，但通过AJAX加载后所有函数都失效了。

问题原因 #

• window.onload事件已触发：主页面加载完成后window.onload就执行过了，AJAX动态加载子页面时，这个事件不会再次触发，导致子页面里绑定在window.onload上的pageSetup函数根本没运行，事件监听器没绑定。
• 动态插入的<script>标签执行问题：通过innerHTML插入子页面的<script>标签，浏览器通常不会自动执行（或者执行时DOM元素还没插入，获取不到元素）。

修复方案 #

方案1：修改AJAX回调，手动初始化子页面功能 #

修改主页面的getContent函数，在插入HTML后，手动初始化子页面的事件监听和数据请求逻辑。

修改后的主页面JavaScript代码

window.onload = registerListeners;

function registerListeners() { 
    let asd; 
    asd = document.getElementById("calgLib"); 
    asd.addEventListener("change", () => getContent("liblocations.html", "lib"), false); 
    asd = document.getElementById("calgTraff"); 
    asd.addEventListener("change", () => getContent("trafficincident.html", "traff"), false); 
    asd = document.getElementById("calgBuild"); 
    asd.addEventListener("change", () => getContent("buildpermit.html", "build"), false); 
    asd = document.getElementById("calgCrime"); 
    asd.addEventListener("change", () => getContent("commcrime.html", "crime"), false); 
}

function getContent(infopage, type) {
    const asynchrequest = new XMLHttpRequest();
    asynchrequest.onreadystatechange = function() {
        if (asynchrequest.readyState == 4 && asynchrequest.status == 200) { 
            const resultsDiv = document.getElementById("buttonresults");
            resultsDiv.innerHTML = asynchrequest.responseText;
            
            // 根据加载的页面类型初始化对应功能
            if(type === "lib") {
                initLibraryPage();
            }
            // 其他页面类型同理添加对应的初始化函数
        } 
    }; 
    asynchrequest.open("GET", infopage, true); 
    asynchrequest.send();
}

// 图书馆页面初始化逻辑
function initLibraryPage() {
    let parsedrecord;
    // 绑定事件监听器
    document.getElementById("libname").addEventListener("keyup", searchByLibraryName,false);
    document.getElementById("libPostal").addEventListener("keyup", searchByLibraryPostal,false);
    document.getElementById("libSquareFeet").addEventListener("keyup", searchByLibrarySqrFeet,false);

    // 请求数据
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
            parsedrecord = JSON.parse(xhr.responseText); 
        } 
    }; 
    xhr.open("GET", "https://data.calgary.ca/resource/m9y7-ui7j.json", true); 
    xhr.send();

    // 按名称搜索函数
    function searchByLibraryName() { 
        document.getElementById("searchvalue").innerHTML = "Searching by Library Name"; 
        const librarytoUse = document.getElementById("libname").value.toUpperCase(); 
        document.getElementById("libPostal").value = ""; 
        document.getElementById("libSquareFeet").value = ""; 
        let gmap = ""; 
        let position = ""; 
        let output = "<tr><th>Library</th><th>Postal Code</th><th>Square Feet</th><th>Phone Number</th><th>Location</th></tr>";

        for(let i=0; i<parsedrecord.length; i++)
        {
            const record = parsedrecord[i];
            const searchLib = record.library.toUpperCase();
            if(searchLib.startsWith(librarytoUse))
            {
                output += "<tr><td>";
                output += record.library;
                output += "</td><td>"
                output += record.postal_code;
                output += "</td><td>";
                output += record.square_feet;
                output += "</td><td>";
                output += record.phone_number;
                output += "</td><td>";
                position = record.location.latitude + "," + record.location.longitude;
                gmap = `<a href=https://www.google.com/maps/search/?api=1&query=${position} target=_blank>Click here to see map</a> `;
                output += gmap;
                output += "</td></tr>";
            }
        }
        document.getElementById("searchresults").innerHTML = output;
    }

    // 补充按邮编、面积搜索的函数（逻辑和searchByLibraryName类似）
    function searchByLibraryPostal() {
        // 实现对应搜索逻辑
    }
    function searchByLibrarySqrFeet() {
        // 实现对应搜索逻辑
    }
}

调整子页面（liblocations.html）

去掉子页面里的<script>标签，逻辑已移到主页面：

<h1>Find Calgary Libraries</h1>
<div class="textfields">
    <table id="fields">
        <tr><td><label>Find Libraries by Name </label></td><td><input type="text" id="libname"></td></tr>
        <tr><td><label>Find Libraries by Postal Code </label></td><td><input type="text" id="libPostal"></td></tr>
        <tr><td><label>Find Libraries by Square Feet </label></td><td><input type="text" id="libSquareFeet"></td></tr>
    </table>
</div>
<br>
<br>
<h3 id="searchvalue"> Enter a search</h3>

<table id="searchresults">
</table>

方案2：使用事件委托+动态加载脚本 #

如果不想移动子页面代码，可以用事件委托绑定父元素，同时动态加载子页面脚本并手动执行初始化。

修改主页面getContent函数

function getContent(infopage) {
    const asynchrequest = new XMLHttpRequest();
    asynchrequest.onreadystatechange = function() {
        if (asynchrequest.readyState == 4 && asynchrequest.status == 200) { 
            const resultsDiv = document.getElementById("buttonresults");
            resultsDiv.innerHTML = asynchrequest.responseText;
            
            // 动态加载对应子页面的JS脚本
            const script = document.createElement('script');
            if(infopage.includes("liblocations")){
                script.src = "liblocations.js";
            } else if(infopage.includes("trafficincident")){
                script.src = "trafficincident.js";
            }
            // 脚本加载完成后手动调用初始化函数
            script.onload = function(){
                if(infopage.includes("liblocations")){
                    pageSetup();
                }
            }
            document.body.appendChild(script);
        } 
    }; 
    asynchrequest.open("GET", infopage, true); 
    asynchrequest.send();
}

调整子页面JS（liblocations.js）

去掉window.onload绑定，让初始化函数可手动调用：

let xhr = new XMLHttpRequest; 
let parsedrecord; 

// 直接暴露初始化函数，不再依赖window.onload
function pageSetup() {
    document.getElementById("libname").addEventListener("keyup", searchByLibraryName,false);
    document.getElementById("libPostal").addEventListener("keyup", searchByLibraryPostal,false);
    document.getElementById("libSquareFeet").addEventListener("keyup", searchByLibrarySqrFeet,false);

    xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
            parsedrecord = JSON.parse(xhr.responseText); 
        } 
    }; 
    xhr.open("GET", "https://data.calgary.ca/resource/m9y7-ui7j.json", true); 
    xhr.send();
}

// 搜索函数保持不变
function searchByLibraryName() { 
    // 原代码逻辑不变
}

关键知识点 #

• 动态加载的DOM不会触发已完成的window.onload事件，必须手动执行初始化逻辑。
• innerHTML插入的<script>不会自动执行，需要通过创建<script>元素的方式动态加载。
• 事件委托可以避免频繁绑定动态元素事件，提升代码稳定性。

内容的提问来源于stack exchange，提问作者Harambe