按钮上的点击事件有奇怪的行为吗？

我在这里使用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 = $('Selected File : ' + file.name + '' + '' + 'Remove File') .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的任何按钮的click事件。

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

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

无法弄清楚为什么当我有更多的那一行时，为什么click all按钮触发singleUploadfile按钮的次数不正确？

Answer 1

以下代码将事件绑定到名为“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; } }); 

Answer 2

尝试这个更改此事件绑定

 $('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(); } }); 

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