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

Question

我正在使用 jQuery File Upload 插件 here 来上传文件。

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

我的代码如下：

   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，但该按钮是隐藏的 - 我不希望用户单独上传文件。但是我有一个名为 Upload All Files 的按钮，单击该按钮时，我会触发 name=singleuploadFile 的任何按钮的单击事件。

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

但是，当我有 2 个文件时 - singleFileUpload 处理程序被命中 3 次 - addedFiles 变量因此为 3 - done 函数被命中两次，因此 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"] 的按钮到单击事件，但是页面加载时页面中已经存在的 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;
   }
});