带有按钮单击事件的奇怪行为？

Question

我在这里使用jQuery File Upload插件上传文件。

对于添加的每个文件，我都会在表中生成一个带有隐藏按钮的行（该行将是该行中每个文件的单个上传按钮），并带有另一个用于删除文件的按钮。

我的代码如下：

   var addedFiles = 0;
    var uploadedFiles = 0;

    $('#uploadFile').fileupload({
        replaceFileInput: false,
        singleFileUploads: true,
        autoUpload: false,
        add: function (event, data) {
            $.each(data.files, function (index, file) {
                data.url = 'myUrl';
                data.type = 'POST';
                data.context = $('<tr><td><strong>Selected File : </strong>' + file.name + '</td><td><button name=singleuploadFile type="button" class="hidden">' +
                        '</button></td><td><button id=' + file.name + ' name=removeFile type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove-circle">' +
                        '</span>Remove File</button></td></tr>')
                    .appendTo('#files');

                $('button[name="singleUploadFile"]').click(function () {
                    if (data.files.length > 0) {
                        data.submit();
                        addedFiles += 1;
                    }
                });

                $('button[name="removeFile"]').on("click", function () {
                    var fileToRemoveId = this.id;
                    if (fileToRemoveId == data.files[0].name) {
                        data.files.splice(0, 1);
                        $(this).closest('tr').remove();
                    }
                });
            });
        },
        done: function () {
            uploadedFiles += 1;

            if (addedFiles == uploadedFiles) {
                alert("All Files Uploaded");
                addedFiles = 0;
                uploadedFiles = 0;
            }
        }
    });

    $('#uploadAllFiles').on("click", function () {
        $('button[name="singleUploadFile"]').click();
    });

因此，您可以看到上载文件的每个单独按钮的名称均为singleUploadFile，但是该按钮是隐藏的-我不希望用户单独上载文件。 但是我有一个名为“上载所有文件”的按钮，单击该按钮时，我会触发任何名称为= singleuploadFile的按钮的点击事件。

此功能有效，并且我的文件上传。 问题是我对完成功能的警报。 在singleFileUpload的click事件中，我有一个名为addedFiles的变量，该变量在每次单击该事件时都会增加。 每次成功上传文件时都会调用完函数，因此我在其中也有一个名为uploadFiles的变量-一旦相等，我就知道所有文件都已上传，因此我可以向用户显示此文件。 如果我有一个文件，并且使用1个隐藏的singleFileUpload按钮创建了一个文件，则此方法有效。 将addedFiles变量设置为1，然后单击完成函数，则uploadFiles变量为1，并触发警报。

但是，当我有2个文件时-singleFileUpload处理程序被命中3次-addFiles变量因此为3-完成函数被按预期命中两次，因此uploadFiles变量为2，所以我的警报不会触发。 对于3个文件-singleFileUpload事件被命中6次。 对于4个文件，它将被命中10次，对于5个文件，将被命中15次。

无法弄清楚为什么当我有多于一行时，为什么单击全部按钮会触发singleUploadfile按钮的次数不正确？

Answer 1

尝试此更改此事件绑定

$('button[name="singleUploadFile"]').click(function (){// Do Stuff}

至

$(document).on('click','button[name="singleUploadFile"]', function (){// Do stuff});

我认为错误是，您将事件与[name="singleUploadFile"]按钮绑定到click事件，但是页面加载时已经在页面中的dom元素两次绑定到该事件，因此只需单击一次，事件就会被触发多次。

你应该做的是

修改此代码

$('button[name="singleUploadFile"]').click(function () {
                if (data.files.length > 0) {
                    data.submit();
                    addedFiles += 1;
                }
            });

            $('button[name="removeFile"]').on("click", function () {
                var fileToRemoveId = this.id;
                if (fileToRemoveId == data.files[0].name) {
                    data.files.splice(0, 1);
                    $(this).closest('tr').remove();
                }
            });

以便所有事件都绑定到文档，因此只有在事件触发时才执行一个函数。

Answer 2

以下代码将事件绑定到名称为“ singleUploadFile”的所有按钮。

$('button[name="singleUploadFile"]').click(function () {
   if (data.files.length > 0) {
       data.submit();
       addedFiles += 1;
   }
});

但是，您希望它仅将事件绑定到新添加的按钮（而不绑定到已绑定事件的按钮）。

请执行下列操作：

data.context.find('button[name="singleUploadFile"]').click(function () {
   if (data.files.length > 0) {
       data.submit();
       addedFiles += 1;
   }
});