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

Posted 2023-03-10

【中文标题】JQUERY刷新DIV后我的JS函数不起作用[重复]

【英文标题】：My JS Function is not working after the DIV is refreshed by JQUERY [duplicate]

【发布时间】：2021-12-06 07:39:22

【问题描述】：

所以我想创建一个搜索栏，用 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>

【问题讨论】：

使用$("#reset").load()，您将完全替换该元素的内容。即使您之后有具有相同 ID 的元素等 - 这些元素不会是 same 元素，它们是新创建的一次。因此，绑定到 old 元素的事件处理程序现在也消失了。您现在要么需要再次将它们分配给那些新元素 - 要么使用称为事件委托的方法。

顺便说一句，这种香草 JS 和 jQuery 的混合至少可以说是丑陋的。是什么阻止您使用 jQuery 方法在您自己的脚本中添加事件处理程序和发出 AJAX 请求...？

我明白了，那我该如何重新分配它们？

具体来说：$('#cariProjek').on('keyup', 只会绑定到代码运行时存在的 cariProjek。而$(document).on("keyup", "#cariProjek", 将在您替换该初始元素后起作用。

@freedomn-m 和 CBroe 谢谢，我的问题已经解决了。

【参考方案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;
);

);