为什么这会导致最大的调用堆栈错误？

Question

我有一个由此代码块触发的最大调用堆栈错误:

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

这是它引用的HTML:

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

我已经检查过,JS文件或具有相同名称,类或ID的HTML文件中没有其他内容.这是堆栈的样子:

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

重复最后8行,直到超过堆栈大小.

Answer 1

问题是因为您在父级的单击处理程序中触发了对子元素的单击.然后,此事件将DOM向上传播回父级,从而触发对子级的单击,该子级传播到父级,触发传播的子级...因此无限递归和堆栈错误.

要解决此问题,最好同时将单击处理程序附加到两个元素,而不是以编程方式创建事件:

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