0

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

我有这个代码：

$('#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 changed 事件。

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

4

2 回答 2

4

当您销毁第一个项目时，事件处理程序将随之销毁。如果您希望事件处理程序位于新项目上，您有两种选择：

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

使用动态形式的委托事件处理可能是最简单的.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);
于 2012-10-13T21:35:34.333 回答
3

您正在破坏事件处理程序绑定到的原始元素，这就是它没有再次触发的原因。与其更换元素，不如尝试重置它。

编辑：看到重置单个文件输入是不平凡的（因为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"/>');
    }
});
于 2012-10-13T21:35:53.617 回答