如何触发 focusout 事件

Question

我有一个焦点事件

$('.alpha').on("focusout", function () {...});

我想从代码中的其他地方触发它。

我试过了$('#input12').focus().blur(); 也试过 $('#input12').trigger("focusout")

编辑：我正在使用动态生成的元素。

但运气不好...

元素 #input12 具有 class 名称 alpha 所以我希望触发 focusout 事件。

有什么方法可以完成吗？

这是我尝试做的时候的 jsfiddle 示例 https://jsfiddle.net/jnmnk68d/

Answer 1

在 jQuery 元素上使用 [0] 有效！ kontrollanten 选项也适用！并且也在 focusout 上进行正常触发！

$(".alpha").on("focusout", function(e){
  console.log(e.type, true);
});

//option 1
$('#input12')[0].focus(); //vanilla
$('#input12')[0].blur(); //vanilla

//option 2
$('#input12').trigger('focusout');

//option 3
$('#input12').trigger('blur');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="alpha" id="input12" />

Answer 2

这是一个取自 jQuery 文档的工作示例。

var focus = 0,
  blur = 0;
$("p")
  .focusout(function() {
    focus++;
    $("#focus-count").text("focusout fired: " + focus + "x");
  })

.inputs {
  float: left;
  margin-right: 1em;
}

.inputs p {
  margin-top: 0;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>focusout demo</title>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div class="inputs">
    <p>
      <input type="text"><br>
      <input type="text">
    </p>
  </div>
  <div id="focus-count">focusout fire</div>

</body>

</html>

也许如果您添加完整的代码我可以提供更好的帮助？

希望对您有所帮助！

Answer 3

看这段代码，它会在焦点发生1秒后调用focusout。

$('.alpha').on("focusout", function() {
  console.log('FOCUSOUT!');
});

$('.alpha').on("focus", function() {
  var self = $(this);
  window.setTimeout(function() {
    self.focusout();
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" class="alpha" />

Answer 4

您需要将事件委托给非动态父元素。

在此示例中，我们在 form 上侦听 focusout 事件，但仅当事件的目标与选择器匹配时才触发我们的函数（在本例中为 ".alpha"）。这样就可以在现在或将来匹配的任何元素上触发事件。

$("form").on("focusout", ".alpha", function() {
    console.log("focusout happened!");
});

这是一个完整的演示，让您了解我们如何使用委托事件触发动态插入内容的事件。

$(function() {
  $("form").on("focusout", ".alpha", function(e) {
    console.warn("focusout triggered on " + e.target.outerHTML);
  });

  //example trigger
  //click the link to trigger the event
  $("a").on("click", function(e) {
    e.preventDefault();
    $("#input12").trigger("focusout");
  });

  //demo injecting content
  //click the create button then focus out on the new element to see the delegated event still being fired.
  var i = 12;
  $("form").on("submit", function(e) {
    e.preventDefault();
    var id = "input" + (++i);
    $(this).find("fieldset").append("<input id='" + id + "' class='alpha' placeholder='" + id + "' />");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <input id="input12" class="alpha" placeholder="input12" />
    <input type="submit" value="create new" />
  </fieldset>
</form>
<a href="#">trigger on input12</a>

Answer 5

我发现我的代码似乎有问题.. 首先，我将我的事件更改为使用委托，并将它连接到一个非动态元素（不是动态添加的元素），正如此处建议的那样。我还需要在 setTimeout 中调用触发函数，因为事实证明渲染动态添加的元素需要一段时间，所以使用 setTimeout 就可以了。

谢谢大家的帮助！

如何触发 focusout 事件

How to trigger focusout event

javascript

jquery

jquery-focusout