JQUERY刷新DIV后我的JS函数不起作用[重复]

Question

所以我想创建一个搜索栏，用 jquery 搜索数据，然后在找到数据后，我通过不刷新页面替换为“div”。然后，当我擦除搜索栏中的所有字符时，它将重置旧的 div。之后，我的 JS 函数将无法再次工作，直到我重新加载页面。

我找不到问题在哪里，我正在使用的记录：

• JQUERY 3.4.1
• js.js 文件
• search.js 文件

我没有将 js.js 与 search.php 混合，因为包含 vanilla js 和 search.js 的 js.js 是 jquery 文件。

搜索栏

<!-- The search menu -->
<form method="GET">
    <div class="input-group">
        <input type="text" name="search" id="cariProjek" class="form-control search-input" placeholder="Cari projek ...">
    </div><br>
</form>

div

<div id="reset">
<div id="search">

<table>
<tr>
    <td>
        <label for="tempFolderPath" class="form-label"><b>Temp Folder Lokasi</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="tempFolderPath" id="tempFolderPath" placeholder="Ini readonly!!!" readonly></label>
    </td>
</tr>   
<tr>
    <td>
        <label for="namaFileBaru" class="form-label"><b>Nama File Baru</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="namaFileBaru" id="namaFileBaru" autocomplete="" required>
    </td>
</tr>
<tr>
    <td>
        <label for="namaFileLama" class="form-label"><b>Nama File yang akan Diubah</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="file" class="form-control" id="namaFileLama" multiple onchange="showname()" required>
    </td>
</tr>
<tr>
    <td>
        <label for="tempNama" class="form-label"><b>Temp Nama File</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="tempNama" id="tempNama" readonly>
    </td>
</tr>
</table>
<button type="button" name="submit" class="btn btn-primary" id="submitForm">Selesai</button><br><br>

<table>
    <tr>
        <td>
            <label for="folderPath" class="form-label"><b>Folder Lokasi Asal</b></label>
        </td>
        <td>:</td>
        <td>
            <input type="text" class="form-control" style="width: 300px;" name="folderPath" id="folderPath" autocomplete="" placeholder="Pertama input ini dulu baru Simpan" require>
        </td>
    </tr>
</table>

<button type="button" name="submitFolderPath" class="btn btn-success" id="submitFolderPath">Simpan</button>
<button type="button" name="resetFolderPath" class="btn btn-danger" id="resetFolderPath">Reset</button>

</div>

js.js（此代码在 div 重置后将不起作用）

编辑：主要问题在这里。

let submitFolderPath = document.getElementById('submitFolderPath');
let resetFolderPath = document.getElementById('resetFolderPath');
let folderPath = document.getElementById('folderPath');
let tempFolderPath = document.getElementById('tempFolderPath'); 

submitFolderPath.addEventListener('click', function(){

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        let date = new Date();
        date.setDate(date.getDate() + 1);
        const expires = "expires=" + date;
        document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
        tempFolderPath.value = folderPath.value;
    }
}

xhr.open('GET', 'index.html', true);
xhr.send();   

});  

resetFolderPath.addEventListener('click', function(){

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        let date = new Date();
        date.setDate(date.getDate() - 1);
        const expires = "expires=" + date;
        let cookie = document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
        folderPath.value = '';
        tempFolderPath.value = folderPath.value;
    }
}

xhr.open('GET', 'index.html', true);
xhr.send();

});

search.js （很确定问题就在这里）

编辑：其实问题不在这里

$(document).ready(function(){
$('#cariProjek').on('keyup', function(){
    if($('#cariProjek').val() == ''){
        $("#reset").load(location.href+" #reset>*","")        
    }else{
        $('#search').load('search.html?keyword=' + encodeURIComponent($('#cariProjek').val()));
    }
})
});

search.html（仅测试）

<h1>Test</h1>

Answer 1

几个小时后，我编辑了我的代码并看到了委托事件的含义。那位兄弟@CBroe 和@freedomn-m 提到了它。我终于将我所有的 JS vanilla 脚本更改为 jquery sript，这样代码看起来就不会难看。我的问题的解决方法是我正在改变我的

submitFolderPath.addEventListener('click', function(){

像这样进入 JQUERY 代码

$(document).on('click',' #submitFolderPath', function(){

因此，即使在 search.js 刷新了我的旧 div 之后，JQUERY 也可以搜索我的所有脚本 非常感谢 @CBroe 和 @freedomn-m 解决了我的问题。我的JS最终代码是这样的。

$(document).ready(function(){

$(document).on('click',' #submitFolderPath', function(){
    
    let folderPath = document.getElementById('folderPath');
    let tempFolderPath = document.getElementById('tempFolderPath');
    let date = new Date();
    date.setDate(date.getDate() + 1);
    const expires = "expires=" + date;
    document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
    tempFolderPath.value = folderPath.value;        
});

$(document).on('click', '#resetFolderPath', function(){

    let date = new Date();
    let folderPath = document.getElementById('folderPath');
    let tempFolderPath = document.getElementById('tempFolderPath');
    date.setDate(date.getDate() - 1);
    const expires = "expires=" + date;
    let cookie = document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
    folderPath.value = '';
    tempFolderPath.value = folderPath.value;
});

$(document).on('click', '#submitForm', function(){

    let namaFileBaruFormData = document.getElementById('namaFileBaru').value;
    let namaFileLamaFormData = document.getElementById('namaFileLama').value;
    let tempFolderPathFormData = document.getElementById('tempFolderPath').value;
    let tempNamaFormData = document.getElementById('tempNama').value;

    let postData = 'namaFileBaru='+namaFileBaruFormData+'&namaFileLama='+namaFileLamaFormData+'&tempFolderPath='+tempFolderPathFormData+'&tempNama='+tempNamaFormData;
    let xhr = new XMLHttpRequest();

    xhr.open('POST', 'function.php', true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200) {
            let alert = document.getElementById('alert');
            alert.innerHTML = "<center class='m-3'><h4><i class='bi bi-gear-fill'></i> Processing...</h4></center>";
            $("#alert").load(window.location.href + " #alert");            
        }
    }
    xhr.send(postData);
});

$(document).on('change', '#namaFileLama', function(){
    
    var name = document.getElementById('namaFileLama');
    var nameFiles = name.files.item(0).name;
    var nameBaru = document.getElementById('tempNama');
    nameBaru.value = nameFiles;
});

});