Uncaught RangeError: Maximum call stack size exceeded问题解决

Uncaught RangeError: Maximum call stack size exceeded问题解决

html:

        <div id="item_fx"  size="0,180,100%,15,BP1">
            <div id="fx_wtxx">
                <input id="fx_check"  type="checkbox" ></input>
                <label id="fx_name1"  for="fx_check" text="腹泻"></label>
                <label id="fx_name3"  text="次/天"  ></label>
                <input id="fx_input" disabled  placeholder=""  maxlength="100"  border-radius="5"></input>
            </div>
            
        </div>

js:

$('#fx_wtxx').click(function() {
        var fx_check = document.getElementById('fx_check');
        if(fx_check.checked){
            $('#fx_input').removeAttr("disabled");
            $('#fx_input').focus();
            $('#fx_input').click();
        }else {
            $('#fx_input').attr("disabled",'true');
            $('#fx_input').blur();
        }
    });

点击#fx_wtxx时，触发#fx_input，结果代码报错：Maximum call stack size exceeded。

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

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