Rebind a JQuery function to an input field after innerHTML command
===

Im using JQuery to check the file size and name from an html file input field. The input field is:

    <div id="uploadFile_div">
        <input name="source" id="imageFile" type="file" style ="border: 1px solid #576675;">
    </div>

And the JQuery:

    $(document).ready(function(){
        
        $('#imageFile').bind('change', function() {
                      
        alert("Test");
        //.... perform input checks...//

        });   
    });

Now, I have a selection box, where the user choose between image file or video file, and based on it I send the file to different servers and also perform appropriate checks. In order to reset the input field (I do it when the user changes the selection box from Video to Image and vise versa) I use this JavaScript trick:

    document.getElementById('uploadFile_div').innerHTML = document.getElementById('uploadFile_div').innerHTML;

But After 1 execution of this JavaScript, The JQuery isn't binded and I don't see the "Test" alert when I select files.

How can i rebind the JQuery ?

Thanks.