jquery replaceWith暗示

Question

我正在使用replaceWith for input 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改变事件不被第一次用户已经上传了错误后延调用。

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

Answer 1

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

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); 

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"/>'); 
    } 
});