javascript - 如何触发focusout事件

Question

我有一个焦点事件

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

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

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

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

但运气不佳...

元素#input12具有类名alpha，因此我期望触发 focusout 事件。

有什么办法可以实现吗？

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

Answer 1

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

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

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

这是一个完整的演示，您可以了解如何使用委托(delegate)事件来触发动态插入的内容的事件。

$(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>