获取jquery错误Uncaught RangeError：超出最大调用堆栈大小

Question

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

当我在firefox中使用此错误“太多递归”和chrome中的“Uncaught RangeError：超出最大调用堆栈大小”时。

<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();
});