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，都将触发您的函数。