传递DOM元素至JS函数报错：当前页面无法找到节点

问题核心 #

你传递的element是已经被AJAX响应内容替换掉的旧DOM节点——虽然还能读取它的属性，但它已经从当前页面的DOM树中移除了，自然无法通过$(element).closest('form')找到页面中现存的父级表单。

解决方案 #

方案1：提前保存所需DOM引用（推荐）

在AJAX请求发起前，先获取需要的关联元素（比如父级form），避免依赖后续会被替换的节点：

$(document).on('change', selector, function() {
    const $currentElement = $(this);
    // 提前获取当前页面中存在的form引用
    const $targetForm = $currentElement.closest('form');
    $.ajax({
        type: 'POST',
        url: url,
        async: true, // 取消同步AJAX，同步会阻塞浏览器，体验极差
        cache: false,
        dataType: 'json',
        data: '',
        success: function (jsonData) {            
            myFunction($targetForm);
            // 或者如果需要操作原元素的新节点，替换后重新选择
            const $newElement = $(selector);
            myFunction($newElement);
        }
    });
});

方案2：替换节点后重新获取元素

如果必须操作新节点，在AJAX成功替换DOM内容后，通过选择器重新获取页面上的现存元素，再传入函数：

$(document).on('change', selector, function() {
    const elementSelector = selector; // 保存选择器
    $.ajax({
        type: 'POST',
        url: url,
        async: true,
        cache: false,
        dataType: 'json',
        data: '',
        success: function (jsonData) {
            // 替换DOM内容的操作（假设你在这里做了节点替换）
            // ...
            // 重新获取页面上的现存元素
            const $newElement = $(elementSelector);
            myFunction($newElement);
        }
    });
});

额外提示 #

强烈建议取消async: false的设置，同步AJAX会阻塞浏览器主线程，导致页面卡顿甚至假死，不符合现代前端的交互规范。

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