Javascript 创建多文件上载逻辑

我正在尝试在MVC应用程序中创建多个文件上载。我可以添加一个新的div 单击“添加”锚定标记。但我只能单击父acnhor标记的事件，而不能单击我使用下面的java脚本函数创建的事件

  View Page
     <div id="ParentFileUploadDiv" style="width: 100%; float: left; padding: 5px 0;">
                                <div style="width: 100%; float: left;" id="FileBlock_1">
                                    <label>Find File</label>
                                    <input type="file" id="DocFile" name="DocumentFile" style="width: 45%; height: 25px;" />
                                    <a class="AddFile">
                                        <img src="~/Images/AddMore.png" />Add</a>
                                    <a class="RemoveFile">
                                        <img src="~/Images/Cross.png" />Remove</a>
                                    <div id="FileNM"></div>
                                    @*    <a class="DownloadImage" style="display: none !important;" title="Download File" id="DI_Anch" onclick="DownloadFile();"></a>*@
                                </div>
                            </div>

    <script>
    $('.AddFile').click(function () {

            var LastChildElement = $("#ParentFileUploadDiv").children().last();
            var GetLastNumber = LastChildElement.attr('id').split('_');
            var FileCounter = parseInt(GetLastNumber[1]) + parseInt(1);
            var curDiv = $('#ParentFileUploadDiv');

            var newDiv = '<div id="FileBlock_' + FileCounter + '" style="width: 100%; float: left;" >' +
                         '<label>Find File</label>' +
                         '<input type="file" name="DocumentFile" style="width: 45%; height: 25px;" />' +
                         '<a class="AddFile">' +
                         '<img src="/Images/AddMore.png" />Add</a>' +
                         '<a class="RemoveFile">' +
                         '<img src="/Images/Cross.png" />Remove</a>'
                         + '</div>';
            $(newDiv).appendTo(curDiv);

        });

        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
        }
    </script>

查看页面
查找文件
添加
去除
@*    *@
$（'.AddFile'）。单击（函数（）{
var LastChildElement=$（“#ParentFileUploadDiv”）.children（）.last（）；
var GetLastNumber=LastChildElement.attr（'id'）.split（'uuz'）；
var FileCounter=parseInt（GetLastNumber[1]）+parseInt（1）；
var curDiv=$（“#ParentFileUploadDiv”）；
var newDiv=''+
“查找文件”+
'' +
'' +
“添加”+
'' +
“删除”
+ '';
$（newDiv）.appendTo（curDiv）；
});
函数RemoveFileUpload（div）{
document.getElementById（“FileUploadContainer”）.removeChild（div.parentNode）；
}

这很难做到。。你考虑过使用插件吗

这是一款免费且易于实施的产品：

---

（它是基于flash的。通过快速的谷歌搜索，您可以找到基于jquery/mvc的，但我自己使用过的，我可以保证。）

将事件委托给最近的静态父级：

$('#ParentFileUploadDiv').on('click','.AddFile', function(){...});

---

您必须使用委托，正如在其他一千个重复问题中所回答的那样……；）<代码>$（'#ParentFileUploadDiv'）。在（'click'，'.AddFile'，function（）{…}）上