CODEWITHSUNDEEP
javascriptjqueryjquery-focusout
itay312
itay312

Reputation: 1568

How to trigger focusout event

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/

Upvotes: 11

Views: 38592

Answers (5)

itay312
itay312

Reputation: 1568

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!

Upvotes: 0

Moob
Moob

Reputation: 16184

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>

Upvotes: 8

Salketer
Salketer

Reputation: 15711

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

Upvotes: 0

N. Ivanov
N. Ivanov

Reputation: 1823

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!

Upvotes: 0

Mouser
Mouser

Reputation: 13304

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

Upvotes: 3

Related Questions