javascript - JQuery 中超出了最大调用堆栈大小，无法在 focusout 内触发下一个元素的焦点

Question

我收到此错误“超出最大调用堆栈大小”。这里的原因是什么以及我怎样才能实现我想要做的事情。

在 Jquery/JavaScript 中，我试图通过按 Tab 键来聚焦下一个控件以更改当前控件的选项卡索引。当前控件将是任何选择(下拉列表)。

我的代码:

$(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 键时自动关闭，但 Mozilla 中不会出现此问题。

Answer 1

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

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