使用jQuery刷新DIV后原生JS函数失效问题排查求助

你的问题核心在于原生JS事件绑定的局限性：
初始页面加载时，js.js通过getElementById获取了submitFolderPath和resetFolderPath按钮，并直接给它们绑定了点击事件。但当你用jQuery的load方法替换#search或#reset内的DOM内容时，原来的按钮元素会被从DOM树中移除，新生成的按钮元素并没有继承之前绑定的事件，所以点击后完全没有反应。

方案一：使用原生JS事件委托（最稳定） #

事件委托的核心是把事件绑定到不会被替换的父元素上（比如#reset），当点击子元素时，事件会冒泡到父元素，父元素再判断点击的是不是目标按钮。这样不管DOM怎么更新，事件都能正常触发。

修改js.js代码如下：

// 给父元素#reset绑定点击事件，委托处理子按钮的点击
document.getElementById('reset').addEventListener('click', function(e) {
    const folderPath = document.getElementById('folderPath');
    const tempFolderPath = document.getElementById('tempFolderPath');

    // 判断点击的是submitFolderPath按钮
    if (e.target.id === 'submitFolderPath') {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const 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按钮
    if (e.target.id === 'resetFolderPath') {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const date = new Date();
                date.setDate(date.getDate() - 1);
                const expires = "expires=" + date;
                document.cookie = `path=${folderPath.value}; ${expires}; path=/`;
                folderPath.value = '';
                tempFolderPath.value = folderPath.value;
            }
        };
        xhr.open('GET', 'index.html', true);
        xhr.send();
    }
});

方案二：在jQuery load完成后重新绑定事件 #

如果不想改原生JS的写法，可以把事件绑定逻辑封装成函数，然后在每次load方法执行完成后，重新调用这个函数绑定事件。

步骤1：修改js.js，封装事件绑定函数 #

function bindFolderEvents() {
    const submitFolderPath = document.getElementById('submitFolderPath');
    const resetFolderPath = document.getElementById('resetFolderPath');
    const folderPath = document.getElementById('folderPath');
    const tempFolderPath = document.getElementById('tempFolderPath');

    // 先移除旧事件，避免重复绑定
    submitFolderPath.removeEventListener('click', submitHandler);
    resetFolderPath.removeEventListener('click', resetHandler);

    // 定义事件处理函数
    function submitHandler() {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const 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();
    }

    function resetHandler() {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const date = new Date();
                date.setDate(date.getDate() - 1);
                const expires = "expires=" + date;
                document.cookie = `path=${folderPath.value}; ${expires}; path=/`;
                folderPath.value = '';
                tempFolderPath.value = folderPath.value;
            }
        };
        xhr.open('GET', 'index.html', true);
        xhr.send();
    }

    // 绑定新事件
    submitFolderPath.addEventListener('click', submitHandler);
    resetFolderPath.addEventListener('click', resetHandler);
}

// 初始页面加载时绑定事件
bindFolderEvents();

步骤2：修改search.js，添加load回调 #

$(document).ready(function(){
    $('#cariProjek').on('keyup', function(){
        if($('#cariProjek').val() == ''){
            $("#reset").load(location.href+" #reset>*", "", function() {
                // 内容加载完成后重新绑定事件
                bindFolderEvents();
            });
        }else{
            $('#search').load('search.html?keyword=' + encodeURIComponent($('#cariProjek').val()), function() {
                // 如果search.html里也有这两个按钮，同样需要绑定
                bindFolderEvents();
            });
        }
    })
});

方案三：改用jQuery事件委托（更简洁） #

既然你的项目已经引入了jQuery，可以直接用jQuery的事件委托语法，代码更简洁：

替换js.js的所有代码为：

$(document).ready(function() {
    // 委托submitFolderPath按钮的点击事件
    $('#reset').on('click', '#submitFolderPath', function() {
        const folderPath = $('#folderPath');
        const tempFolderPath = $('#tempFolderPath');
        
        $.get('index.html', function() {
            const date = new Date();
            date.setDate(date.getDate() + 1);
            const expires = "expires=" + date;
            document.cookie = `path=${folderPath.val()}; ${expires}; path=/`;
            tempFolderPath.val(folderPath.val());
        });
    });

    // 委托resetFolderPath按钮的点击事件
    $('#reset').on('click', '#resetFolderPath', function() {
        const folderPath = $('#folderPath');
        const tempFolderPath = $('#tempFolderPath');
        
        $.get('index.html', function() {
            const date = new Date();
            date.setDate(date.getDate() - 1);
            const expires = "expires=" + date;
            document.cookie = `path=${folderPath.val()}; ${expires}; path=/`;
            folderPath.val('');
            tempFolderPath.val(folderPath.val());
        });
    });
});

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