Trigger event click is executing multiple times using jQuery

Question

I am using trigger('click') while using the file upload in jQuery. I am providing my code below.

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

My html part is given below.

<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>

If I am clicking on file input the above function is executing 3/2 times and I can know it from the console messages. At one time click header is coming 3 times as result I have to click on open button after selecting file from discs also 3 times. Here I need to execute at once at one time click.

You want to prevent event propagation after triggering a click on the file — Oluwafemi Sule
– Oluwafemi Sule, Commented Dec 19, 2017 at 12:58
@Satpal : Yes, there are many input type=file in a single page whose class name is .file but its working sometimes and max times this scenarioa. — satya
– satya, Commented Dec 19, 2017 at 13:04
@Satpal : when I am checking the length its give the error Uncaught TypeError: Cannot read property 'length' of undefined. — satya
– satya, Commented Dec 19, 2017 at 13:19

Hitesh · Accepted Answer · 2017-12-19 14:57:30Z

0

As your click event is getting binded multiple times you can use off('click')

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

edited Dec 19, 2017 at 14:57

answered Dec 19, 2017 at 13:39

Hitesh

1673 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

satya Over a year ago

I did as per you but other click events are blocking while I am using this.

Hitesh Over a year ago

Can you please try the above-edited changes as now you will bind the click event on the browser class thus the other events wont get effected

satya Over a year ago

I did as per you but the file browsing is not working at all.

Collectives™ on Stack Overflow

Trigger event click is executing multiple times using jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related