Question

我正在使用input type=file的replaceWith来处理用户想要上传的文件的更改。

我有这段代码：

$('#add_cv_input').change(function() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
    }
});

现在的问题是，在第一次用户上传了错误的扩展名后，没有调用此jquery更改事件。

我不知道为什么会这样。如果用户第一次上传有效的扩展名然后将其更改为其他有效扩展名，则一切正常。

Answer 1

当您销毁第一个项目时，会使用它销毁事件处理程序。如果您希望事件处理程序位于新项目上，则有两个选项：

您可以在创建新对象后重新安装事件处理程序。
您可以使用未销毁的父级的委派事件处理。

使用.on()的动态形式委托事件处理可能最简单：

$(some parent selector).on('change', '#add_cv_input', function() {
    // code here
});

您选择的某个父选择器尽可能接近#add_cv_input，但不会被销毁。

如果你想在替换元素后重新附加事件处理程序，你可以这样做（尽管委托的事件处理会更清晰）：

function processChange() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
        $('#add_cv_input').change(processChange);
    }
});

$('#add_cv_input').change(processChange);

Answer 2

您正在销毁事件处理程序绑定的原始元素，这就是为什么它不再被触发。而不是替换元素尝试重置它。

编辑：看到重置单个文件输入非常重要（因为this.value = null;在所有浏览器中都不起作用），替换元素似乎是更好的选择。

您可以将事件处理程序附加到新创建的元素。 [.replaceAll()]

function cv_input_file(){
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $('<input id="add_cv_input" type="file"/>')
         .replaceAll("#add_cv_input")
         .change(cv_input_file);
    }
}
$('#add_cv_input').change(cv_input_file);

或使用事件委托，因此每次更换元素时都不必添加处理程序。

$(document/*or the closest static ancestor*/).on('change', '#add_cv_input', function() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
    }
});

jquery replaceWith含义

2 个答案: