使用jQuery触发点击事件时，会执行多次的问题

Question

使用jQuery触发点击事件时，会执行多次的问题

4

我在使用jQuery中的文件上传时，使用了trigger('click')。以下是我的代码。

$(document).on('click', '.browse', function(){
   var file = $(this).parent().parent().parent().find('.file');
   file.trigger('click');
   console.log('header');
 })

以下是我的HTML代码：

<div class="form-group" style="margin-bottom:0px;">
<input type="file" name="logoimage" id="logoimage" ng-model= "form.logoimage" onchange="angular.element(this).scope().uploadedImage(this);" accept=".gif,.jpg,.jpeg,.png" class="file">
<div class="input-group col-xs-12">
<input type="text" class="form-control" placeholder="Upload Logo" name="setlogoimage" id="setlogoimage" ng-model="setlogoimage">
<span class="input-group-btn">
<button class="browse btn btn-primary" type="button">Upload File</button></span> 
    </div>
</div>

如果我点击文件输入，上面的函数会执行3/2次，我可以从控制台消息中知道这一点。一次点击时，header 会出现3次，因此我必须在从磁盘选择文件后再点击打开按钮3次。在这里，我需要在一次点击时执行一次。

- satya

1

这是因为您绑定了多个点击事件。 - dfsq

在触发文件点击后，您想要阻止事件传播。 - Oluwafemi Sule

@Satpal：是的，在同一页中有许多class名称为“.file”的input type=file，但有时它能正常工作，大多数情况下则出现问题。 - satya

@Satpal：当我检查长度时，它会出现错误Uncaught TypeError: Cannot read property 'length' of undefined。 - satya

让我们在聊天中继续这个讨论。 - satya

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hitesh · Answer 1

由于您的点击事件被绑定了多次，因此您可以使用off('click')

$('.browse').off('click').on('click', function(){
  var file = $(this).parent().parent().parent().find('.file');
  file.trigger('click');
  console.log('header');
});