How to trigger focusout event

Question

I have a focusout event

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

and I want want to trigger it from somewhere else in the code.

I tried $('#input12').focus().blur(); and also tried $('#input12').trigger("focusout")

edit: I am using a dynamically generated elements.

but no luck there...

the element #input12 has the class name alpha so I expect The focusout event to be triggered.

Is there any way of getting it done?

here is a jsfiddle example of when I am trying to do https://jsfiddle.net/jnmnk68d/

I can't reproduce this. `$('#input12').trigger("focusout")` works fine for me. I suspect that you are adding the elements dynamically after the script has initialised. Is that the case? — Moob, Oct 23 '17 at 14:39
Yes, I am using dynamically added elements. I edited my post — itay312, Oct 23 '17 at 14:47

Moob · Accepted Answer · 2017-10-23T15:10:44.103

You need to delegate your events to a non-dynamic parent element.

In this example, we listen for focusout events on the form but only fire our function if the event's target matches the selector (in this case ".alpha"). This way the event can be fired on any elements that match now or in the future.

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

Here's a full demo which allows you to see how using delegated events we are able to trigger the event on dynamically inserted content.

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

@itay312 You should update your question to include the actual code you are using. It might be that the problem is elsewhere. — Moob, Oct 23 '17 at 15:15
thanks, took your advise and it worked after calling the trigger event inside a setTimeout function — itay312, Oct 23 '17 at 15:45

score 3 · Answer 2 · answered Oct 23 '17 at 14:29

Using [0] on the jQuery element works! Also kontrollanten options works too! And doing a normal trigger on focusout too!

$(".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" />

score 0 · Answer 3 · answered Oct 23 '17 at 14:30

Here is a working example taken from the jQuery docs.

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>

Maybe if you add your full code I can be of better help?

Hope this helps!

score 0 · Answer 4 · answered Oct 23 '17 at 14:30

See this code, it will call focusout 1second after focus has happend.

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

score 0 · Answer 5 · answered Oct 23 '17 at 15:43

I found out what seemed to be wrong with my code.. first of all I changed my event to use delegation and I connected it to a non dynamic element (element that was not added dynamically) just as some here advised. I also needed to call the trigger function inside a setTimeout because it turns out that it takes a while to render the dynamically added element, so using the setTimeout did the trick.

Thank you all for helping out!

How to trigger focusout event

5 Answers5