在JQuery中超过了最大调用堆栈大小，以激发焦点内的下一个元素的焦点

Question

我收到此错误“超出了最大调用堆栈大小”。 这是什么原因？我该如何实现自己的目标。

在Jquery / JavaScript中，我试图通过按Tab键来集中下一个控件以更改当前控件的Tab索引。 当前控件将是任何select（下拉列表）。

我的代码：

$(document).on('focusout', 'select', function () {


                        $(this).click();
                        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                        var index = fields.index(this);
                        if (index > -1 && (index + 1) < fields.length) {

                             fields.eq(index + 1).focus();
                            //checkDateAndTime();
                        }
                    });

注意：我试图通过setTimeout函数进行修复，但是如果这样做，我不会收到该错误，但是如果我尝试填充单击选项，则选择列表将关闭。

我必须这样做，因为我必须解雇$（this）.click（）; 因为如果我不这样做，则在按Tab键时dropdownlist选项的ui不会自动关闭，但是Mozilla中不会出现此问题。

Answer 1

首先，除非页面加载后没有通过某些代码或ajax生成的动态元素，否则不需要事件委托语法。

我在focusout注意到的另一件事是，您再次对同一元素执行focusout .click() ，这反过来又获得了焦点。

您正在使用.parents()方法进行遍历，这在某种程度上是导致您遇到错误的原因。

---

我建议您这样做：

$('select').on('focusout', function() {
  var fields = $(this).closest('form').find('select');
  var idx = fields.index(this);
  if (idx > -1 && (idx + 1) < fields.length) {

    fields.eq(idx + 1).focus();
    //checkDateAndTime();
  }
});