獲取html檔案后腳本不起作用。Javascript只觸發一次-有解無憂

所以我正在做一個專案，我正在獲取一個 HTML 檔案并用我正在獲取的檔案替換正文內容。

所以我有 index.html 和 result.html。我已經設法根據“我的輸入欄位中的匹配搜索結果”切換內容。但我遇到的問題是 .js 檔案中的腳本只觸發一次。

我不明白為什么會這樣。我希望能夠在 index.html 和 result.html 之間來回切換

這是我檢查輸入欄位是否與檔案關鍵字匹配的代碼：

const searchInput = document.getElementById("search");

document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }

這是我獲取 HTML 的代碼：

function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        const body = document.querySelector('body');
        
        body.innerHTML = '';
        body.append(doc.querySelector('body'));

    });
}

uj5u.com熱心網友回復：

您正在用 index/result.html 的內容替換整個檔案，從而替換頁面中的輸入、按鈕和腳本。

我的建議是使用 div 容器并更新 div 的內容，而不是整個檔案正文的 innerhtml。

這是一個作業示例：

<html>
<body>
    <form>
        <input type="text" id="search" />
        <input type="submit" id="submit" value="Search" />
    </form>
    <div id="dynamic_content">
        Default text
    </div>
</body>
<script>

const searchInput = document.getElementById("search");

document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }
});

function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        document.getElementById("dynamic_content").innerHTML = doc.querySelector('body').innerHTML;
    });
}
</script>
</html>

uj5u.com熱心網友回復：

您的代碼應該可以正常作業，請查看以下代碼：

    <form>
    <input type="text" id="search">
    <button type="submit" id="submit">Go</button>
</form>
<script>
    const searchInput = document.getElementById("search");

    document.getElementById("submit").addEventListener("click", function (e) {
        e.preventDefault();
        if (searchInput.value === "result") {
            handleRequest("result.html");
            searchInput.value = "";
        }
        e.preventDefault();
        if (searchInput.value === "index") {
            handleRequest("index.html");
            searchInput.value = "";
        }
    })
</script>

<script>
    function handleRequest(url) {
fetch(url)
.then(res => res.text())
.then((text) => {
    const doc = new DOMParser().parseFromString(text, 'text/html');
    const body = document.querySelector('body');
    
    body.innerHTML = '';
    body.append(doc.querySelector('body'));

});

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/521583.html

標籤：javascripthtml阿贾克斯获取 API

上一篇：我正在使用jQuery和Ajax在Laravel9中制作國家和城市的依賴下拉串列，但獲得了500個內部服務器

下一篇：發送請求AJAX