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