jquery - 元素焦点无限循环

Question

我有这个代码:

  $("body").on("focus", ".input", function () {
      $("body").append("loop<br>");
      $(this).find("input").focus();
  });

fiddle :
http://jsfiddle.net/Hc3D8/

为什么会循环？

Answer 1

它循环是因为您将一个函数附加到 focus 事件，该函数本身会触发 focus 事件。

即使您在内部 input 元素上调用 focus 事件，它仍然会冒泡到外部 .input 元素。

要解决此问题，您可以 Hook 外部元素上的不同事件:

$("body").on("click", ".input", function () { // click event
    $("body").append("loop<br>");
    $(this).find("input").focus();
});

或者您可以停止在输入的焦点上传播:

$("body")
    .on("focus", ".input", function () {
        $("body").append("loop<br>");
        $(this).find("input").focus();
    })
    .on('focus', 'input', function(e) {
        e.stopPropagation();
    });

Example fiddle