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.

Chris Montgomery · Accepted Answer · 2013-01-07 02:56:12Z

2

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.

answered Jan 7, 2013 at 2:56

Chris Montgomery

2,3642 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making javascript work after dynamically adding html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related