How to trigger focusout event

Question

How to trigger focusout event

33.4k Views Asked by itay312 At 23 October 2017 at 14:25

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/

Original Q&A

There are 5 best solutions below

Mouser On 23 October 2017 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" />

N. Ivanov On 23 October 2017 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!

Salketer On 23 October 2017 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" />

itay312 On 23 October 2017 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!

**Moob** · Accepted Answer · 2017-10-23T14:42:03.100000

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>

How to trigger focusout event

There are 5 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-FOCUSOUT

Trending Questions

Popular # Hahtags

Popular Questions