为什么在点击div后形成循环？

Question

我有样式文件输入:

<div class="fakeFileContainer">
 <div class="fakeFile">Do??cz brief</div>
 <input id="file" type="file" name="file"/>
</div>

对于这部分代码我有一些js:

var fileInput = $('#contact #file')

fileInput.change(function(){
    $this = $(this);
    $('#contact form .fakeFile').text($this.val());
})

$('#contact form .fakeFileContainer').on('click', function () {
    fileInput.click(); //looping here
}).show();

点击后.fakeFileContainer我在控制台中收到了这个错误信息:

Uncaught RangeError: Maximum call stack size exceeded

它是由循环引起的,但我不知道为什么这个循环在这里形成.可以告诉我这种情况的原因吗？

---

PS请原谅任何拼写或语法错误,英语不是我的第一语言

Answer 1

您的点击次数fileInput也由该功能处理(因为偶数气泡直到容器).所以代码说:"点击时,触发另一个点击事件".第二次点击事件会再次询问相同的问题,并且答案再次是触发另一次点击事件.因此,一个无限循环.