javascript - 动态添加 html 后使 javascript 工作

Question

我有一个启用自动上传的文件上传按钮，如下所示:

<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();
    });
});

但是，我想将其作为 html 动态插入。我也需要添加自动上传 javascript。这是我到目前为止所拥有的:

$('#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>'
 });

我需要添加 javascript 才能使自动上传正常工作。有什么办法吗？我迷路了。

谢谢。

Answer 1

把你上面的js改成这样:

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

主要区别在于您在整个主体上设置事件监听器，如果事件是从给定输入启动的，则无论是否动态添加 html 都会触发您的函数。