jquery - 获取jquery错误Uncaught RangeError : Maximum call stack size exceeded

Question

$(document).on("focus",'.select2-selection--multiple',function(){
    $(".select2-search__field").focus();
}); 

当我在 Firefox 中使用此错误“太多递归”和在 chrome 中使用“未捕获的范围错误:超出最大调用堆栈大小”时。

<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;">
    <span class="selection">
        <span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
            <ul class="select2-selection__rendered">
                <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;"></li>
            </ul>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

这是我的 html，实际上我正在使用 selec2 插件并尝试专注于它
当我按下 Tab 时。

Answer 1

正如 Rory 提到的，你必须防止事件冒泡:

$(document).on("focus", '.select2-search__field', function(event) {
  event.stopPropagation();
});

$(document).on("focus", '.select2-selection--multiple', function() {
  $(".select2-search__field").focus();
});