奇怪的行为与按钮上的点击事件？ [英] Strange behavior with click event on button?
问题描述
我正在使用jQuery文件上传插件此处上传文件。
对于添加的每个文件，我在表格中生成一个带有隐藏按钮的行（这将是该行中每个文件的单个上传按钮），另一个按钮用于删除
我的代码如下：
var addedFiles = 0 ;
var uploadedFiles = 0;
$ b $（'＃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>所选文件：< / strong>'+ file.name +'< / td>< td><按钮名称= singleuploadFile type =buttonclass =hidden>'+
'< / button>< / td>< td>< button id ='+ file.name +'name = removeFile < / span>类型=按钮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（）;
}
}）;
}）;
}，
完成：function（）{
uploadedFiles + = 1;
if（addedFiles == uploadedFiles）{
alert（All Files Uploaded）;
addedFiles = 0;
uploadedFiles = 0;
}
}
}）; （）;
$ b $（'＃uploadAllFiles'）。on（click，function（）{
$（'button [name =singleUploadFile]'）。 $ b}）;
因此，您可以看到上传文件的每个个别按钮的名称为singleUploadFile，但该按钮是隐藏 - 我不希望用户单独上传文件。但我有一个名为上传所有文件的按钮，当点击时，我触发任何名称为singleuploadFile的按钮的单击事件。
这个工程的功能和我的文件上传。问题是我对完成功能的警报。在singleFileUpload的click事件中，我有一个名为addedFiles的变量，每次碰到这个事件都会增加。每次文件成功上传时，done函数都会被调用，所以我也有一个名为uploadedFiles的变量 - 一旦它们相等，我知道所有的文件都已经上传了，所以我可以把它显示给用户。这工作，如果我有一个文件，我得到一个隐藏singleFileUpload按钮创建一个。 addFiles变量设置为1，当完成函数时，uploadFiles变量为1，并触发警报。然而，当我有2个文件 - singleFileUpload处理程序得到命中3时间 - 因此，addedFiles变量是3 - 完成函数获得命中两次，所以uploadedFiles变量是2，所以我的警报不会触发。对于3个文件 - singleFileUpload事件命中6次。对于4个文件，它被命中了10次，5个文件被命中了15次。
不知道为什么当我有更多的一行，为什么点击所有按钮是触发singleUploadfile按钮的次数不正确？
以下代码将事件绑定到名为singleUploadFile 。
$ $ $ $ $（'button [name =singleUploadFile]'）。click（function（）{
if（data.files.length> 0）{
data.submit（）;
addedFiles + = 1;
}
}）;
但是您希望它将事件绑定到新添加的按钮（而不是已经具有的按钮它绑定）。
执行下列操作：
$ $ p $ data.context单击（函数（）{
if（data.files.length> 0）{
data.submit（）;
addedFiles + = 1;
}
}）;
I am using jQuery File Upload plugin here for uploading files.
For each file that is added I generate a row in the table with a hidden button (that would be the single upload button for each file in the row) and another button for removing the file.
My code is below:
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();
});
So you can see each individaul button for the file for Upload has a name of singleUploadFile but that button is hidden - I dont want the User to Upload Files individually. But I have a button called Upload All Files which when clicking I trigger the click event for any button with a name=singleuploadFile.
The functionality for this works and my files upload. The problem is my alert for the done function. in the click event for singleFileUpload I have a variable called addedFiles which gets incremented each time this event is hit. The done function will get called each time a file successfully uploads so I also have a variable in there called uploadedFiles - once they are equal I know that all files have uploaded so i can display this to the user. This works if I have one file and I get one created with 1 hidden singleFileUpload button. The addedFiles variable gets set to 1 and when hitting done function the uploadFiles variable is 1 and the alert fires.
However when I have 2 files - the singleFileUpload handler gets hit 3 times - the addedFiles variable therefore is 3 - done function gets hit twice as expected so uploadedFiles variable is 2 so my alert doesnt fire. For 3 files - the singleFileUpload event gets hit 6 times. For 4 files it gets hit 10 times and for 5 files it gets hit 15 times.
Cant figure out why when I have more that one row, why the click all button is triggering the singleUploadfile button the incorrect amount of times?
The following code binds the event to all buttons with the name "singleUploadFile".
$('button[name="singleUploadFile"]').click(function () {
if (data.files.length > 0) {
data.submit();
addedFiles += 1;
}
});
But you want it to bind the event just to the newly added button (not to buttons that already have it bound).
Do the following:
data.context.find('button[name="singleUploadFile"]').click(function () {
if (data.files.length > 0) {
data.submit();
addedFiles += 1;
}
});
这篇关于奇怪的行为与按钮上的点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
