帶有按鈕單擊事件的奇怪行為？

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