Form file input element breaks while trying to reset using replaceWith

Form file input element breaks while trying to reset using replaceWith

I'm trying to write a function that overrides the default browser functionality for a input file element, but somewhere, I'm losing a connection to my input box and after about 10 hours of debugging, I give up.

I have the following function that takes the following arguments, all jQuery objects:

ele_input : the file input box that has 0 opacity (.5 for testing purposes)
ele_trigger : the UI button that triggers the ele_input box to show, making it able to receive clicks
ele_text : a text input box that acts as a label, displaying the selected file name
ele_clear : the UI button that triggers the resetting of the input file box

  1. function FileInputActivate(ele_input, ele_trigger, ele_text, ele_clear)
  2. {
  3. ele_input.hide(); // hide input element

  5. // Once a file is selected, ele_text (a label) is set to reflect the chosen file
  6. ele_input.change(
  7. function()
  8. {
  9. ele_text.val($(this).val());
  10. }
  11. );

  13. // On mouse over trigger
  14. ele_trigger.mouseover(
  15. function()
  16. {
  17. ele_input.show(); // show input element
  18. console.log(ele_input.is(':visible'));
  19. }
  20. );

  22. ele_clear.click(
  23. function()
  24. {
  25. ele_input.hide();
  26. ele_input.replaceWith(ele_input.clone(true)); // reloads file input, which acts as a clearing mechanism, which does clear correctly. is this breaking it?
  27. ele_text.val(''); // clear label text
  28. console.log(ele_input.val()); // displays as empty string, as it should
  29. }
  30. );
  31. }

For the first execution, everything works as it's supposed to, but as soon as the box is reset, ele_input no longer appears when the trigger receives mouseover. It's still an object, and using the same selector, gives an element, but I don't think it's the same one.

The line:
  1. console.log(ele_input.is(':visible'));
no longer returns TRUE, even though the preceding line explicitly calls the show() method.

Any help is greatly appreciated.