jQuery Forum

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
4. 
   
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. );
12. 
    
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. );
21. 
    
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.