Making javascript work after dynamically adding html

Question

I have a file upload button with auto upload enabled as follows:

<form id="fileupload" action="home/uploadprofilepic" method="POST" enctype="multipart/form-data">
 <span class="btn btn-success fileinput-button">
 <i class="icon-plus icon-white"></i>
 <span>Add files...</span>
 <input type="file" name="files">
 </span>
</form>
$(document).ready(function() 
{
 $("input[name=files]").change(function() {
 $(this).closest("form").submit();
 });
});

However, I want to dynamically insert this as html. I need to add the autoupload javascript too. This is what I have so far :

$('#uploadPicId').popover({ 
 title : 'Edit Profile Picture', //this is the top title bar of the popover. add some basic css
 html: 'true', //needed to show html of course
 content : '<form id="fileupload" action="home/uploadprofilepicmeta" method="POST" enctype="multipart/form-data">'+
 '<span class="btn btn-success fileinput-button">'+
 ' <i class="icon-plus icon-white"></i>'+
 ' <span>Add files...</span>'+
 ' <input type="file" name="files">'+
 '</span>'+
 '</form>'
 });

I need to add javascript to make the autoupload work. Is there any way to do this? I am pretty lost.

Thanks.

Answer 1

Change your above js to be like this instead:

$(document).ready(function() 
{
 $("body").on("change", "input[name=files]", function() {
 $(this).closest("form").submit();
 });
});

The key difference is your setting up the event listener on the entire body and if the event was launched from the given input, fire your function no matter if the html was added dynamically or not.