Uncaught RangeError: Maximum cal

写了这么一段代码：
html:

   <div class="add-div">
           <img src="/Public/dist/Home/images/add.png" class="add-img" />
           <input type="file" accept=".jpg,.jpeg,.png" id="fileInput" class="hidden" />
   </div>

js:

    $('.add-div').click(function(){
        $('#fileInput').trigger('click');
    });

功能很简单，就是点击div .add-div时，触发input #fileInput，结果代码报错：Maximum call stack size exceeded。

报错原因：出现无限循环。
我的jq代码实现的是点击div时触发input的点击事件，但是这个input是被包裹在div内部的，所以input的点击事件触发后，通过事件冒泡又触发了div的点击事件，div的点击事件又去触发input的点击事件，input的点击事件再次冒泡触发div的点击事件……如此一来便造成了无限循环，所以报错：Maximum call stack size exceeded。

解决方法：将input移出div即可。