7

我有一个焦点事件

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

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

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

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

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

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

有没有办法完成它？

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

4

5 回答 5

7

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

在此示例中，我们在 上监听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>

于 2017-10-23T14:42:03.100 回答
2

[0]在 jQuery 元素上使用有效！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" />

于 2017-10-23T14:29:13.793 回答
0

这是一个取自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>

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

希望这可以帮助！

于 2017-10-23T14:30:28.920 回答
0

看这段代码，它会在焦点发生后 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" />

于 2017-10-23T14:30:51.817 回答
0

我发现我的代码似乎有什么问题。首先，我将事件更改为使用委托，并将其连接到非动态元素（未动态添加的元素），就像这里的一些建议一样。我还需要在 setTimeout 中调用触发函数，因为事实证明，渲染动态添加的元素需要一段时间，所以使用 setTimeout 就可以了。

谢谢大家帮忙！

于 2017-10-23T15:43:54.847 回答