Why is this causing a maximum call stack error?

Question

I have a maximum call stack error being triggered by this code block:

$(".resume_box").click(function () {
   $("#resume_upload").trigger("click");
});

This is the HTML it references:

<div class="resume_box">
   <div class="file_instructions"> Please use .pdf format</div>
   <div class="button_plate">Choose a file</div>
   <input id = "resume_upload" type = "file" name = "resume" style = "display: none" />
</div>

I've checked, and there's nothing else in the JS file or the HTML file with the same name, class, or id. Here's what the stack looks like:

trigger @   jquery.min.js:4
(anonymous) @   jquery.min.js:4
each    @   jquery.min.js:2
each    @   jquery.min.js:2
trigger @   jquery.min.js:4
(anonymous) @   script.js:70
dispatch    @   jquery.min.js:3
r.handle    @   jquery.min.js:3
trigger @   jquery.min.js:4
(anonymous) @   jquery.min.js:4
each    @   jquery.min.js:2
each    @   jquery.min.js:2
trigger @   jquery.min.js:4
(anonymous) @   script.js:70

Repeat the last 8 lines until the stack size is exceeded.

Answer 1

Every other answer is correct (event bubbling), here is just another solution: simply remove the resume_upload button from the resume_box element. Thus, triggering a click on the button won't bubble up to the box, putting an end to this call stack.

<div class="resume_box">
  <div class="file_instructions"> Please use .pdf format</div>
  <div class="button_plate">Choose a file</div>
</div>
<input id="resume_upload" type="file" name="resume" style="display: none" />

Here is a working codepen.

Answer 2

Because of event propagation where events bubble up the DOM tree.

#resume_upload is within .resume_box. Clicking an element sends an event that bubbles up to the parent.

In your case, clicking the parent triggers a click on the child which propagates to the parent's handler, which then triggers the child click again, which calls the parent handler and so on.

You can fix this by preventing propagation manually when clicking the inner element:

$("#resume_upload").click(function (e) {
   e.stopPropagation();
});

Answer 3

The issue is because you're triggering a click on a child element inside a click handler on the parent. This event then propagates up the DOM back to the parent, which triggers the click on the child which propagates to the parent which triggers the child which propagates... Hence infinite recursion and stack errors.

To fix this you would be better to attach a click handler to both elements at the same time instead of creating an event programmatically:

$(".resume_box, #resume_upload").click(function(e) {
    e.stopPropagation(); // important, as it will prevent the event bubbling .: recursion
    // your logic here...
});

Answer 4

You're triggering a click event on the .resume_box in the event handler of the .resume_box (since click events bubble up the DOM). Instead, only trigger the click manually on the input if it wasn't already a click on the input:

$(".resume_box").click(function ( e ) {
   if ( e.target.id !== 'resume_upload' )
       $("#resume_upload").trigger("click");
});

Answer 5

Because events bubble up in the dom tree. So, if click event bound on parent will get executed if same click triggered on the child element.

Thus it creates a loop and cause the error your got.

Solution is that you can either use event.stopPropagation(); on child element.

or change your selector as:

$(".resume_box > .button_plate").click(function () {