Question

我有一个焦点事件

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

我希望从代码中的其他位置触发它。

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

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

但那里没有运气......

元素#input12的类名为alpha，因此我希望触发焦点事件。

有没有办法让它完成？

这是我尝试做https://jsfiddle.net/jnmnk68d/

时的一个例子

Answer 1

在jQuery元素上使用[0]可以正常工作！ kontrollanten选项也有效！并在focusout上执行正常触发！

＆＃13;

$(".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');

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望这有帮助！

Answer 3

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

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

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

在此示例中，我们在focusout上侦听form个事件，但只有在事件的目标与选择器匹配时才触发我们的函数（在本例中为".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可以解决问题。

谢谢大家的帮忙！

如何触发焦点事件

5 个答案: