我的JS函数不工作后，DIV是由JQUERY刷新

Question

所以我想做一个搜索栏，用jquery搜索数据，然后在数据被发现后，我替换成'div'不刷新页面。然后，当我擦除搜索栏中的所有字符时，它将重置旧的div。之后，我的JS函数将再次工作，直到我重新加载页面。

问题在哪里我找不到它，因为我正在使用:

JQUERY 3.4.1

• js.js文件
• search.js文件

我没有将js.js与search.php混合，因为js.js包含香草js和search.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香草脚本变成jquery脚本，这样代码看起来就不难看了。解决我的问题的方法是改变我的

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

将放入JQUERY代码中，如下所示

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

JQUERY可以搜索所有的脚本即使旧的div被search。js刷新后非常感谢@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;
});

});