移除再添加DOM元素后，如何保留jQuery FileUpload处理程序？

这个问题很常见——当你用.remove()把元素从DOM中移除时，jQuery会同时清理掉绑定在该元素上的所有事件处理程序和数据，包括你之前初始化的jQuery FileUpload。当你再把元素加回DOM时，这些绑定自然就失效了。

这里有几个靠谱的解决方案，你可以根据自己的场景选择：

1. 用.detach()替代.remove()（最简单的方案） #

jQuery的.detach()方法和.remove()类似，都是把元素从DOM中移除，但它会保留元素上的所有事件绑定和jQuery数据。这样当你把元素重新添加回DOM时，原来的FileUpload处理程序依然有效，完全不需要额外操作。

修改你的代码：

let file_input_elements = $(".uploads_files_answers") 
// 用detach代替remove，保留事件和数据
file_input_elements.detach() 
file_input_elements.appendTo(main_form)

2. 封装初始化逻辑，移动后重新绑定 #

如果因为某些原因你必须用.remove()，那可以把FileUpload的初始化代码封装成一个函数，在元素重新添加到DOM后，再次调用这个函数绑定处理程序。

示例代码：

// 封装初始化函数
function initFileUpload(elements) {
    elements.fileupload({ 
        dataType: 'json', 
        progressInterval: 10, 
        progressall: function (e, data) { 
            $('#progress .file-load-bar').css('width', '100%'); 
        }, 
        error: error_file_downloading, 
        done: function (e, data) { 
            console.log('Select file') 
        } 
    });
}

// 页面加载时第一次初始化
initFileUpload($(".uploads_files_answers"));

// 移动元素的逻辑
let file_input_elements = $(".uploads_files_answers") 
file_input_elements.remove() 
file_input_elements.appendTo(main_form)
// 重新初始化FileUpload
initFileUpload(file_input_elements);

这个方法的好处是，如果你以后需要动态新增.uploads_files_answers元素，也可以调用这个函数来初始化，通用性更强。

3. 使用事件委托（适合动态新增元素的场景） #

如果你的页面不仅会移动现有元素，还会动态生成新的.uploads_files_answers输入框，那事件委托会更合适。你可以把FileUpload的初始化绑定到父元素（比如你的main_form），这样不管子元素是移动过来的还是新生成的，事件都能正常触发。

示例代码：

// 在父元素上初始化FileUpload，指定fileInput目标
$(main_form).fileupload({
    fileInput: $(".uploads_files_answers"),
    dataType: 'json', 
    progressInterval: 10, 
    progressall: function (e, data) { 
        $('#progress .file-load-bar').css('width', '100%'); 
    }, 
    error: error_file_downloading, 
    done: function (e, data) { 
        console.log('Select file') 
    } 
});

不过要注意，这种方式需要确保父元素在页面加载时就存在于DOM中，否则委托不会生效。

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