Infinite loop in focusout jquery, only in Chrome

Question

I have two input, one static:

<input type="text" class="someclass" />

and other dynamic:

$("<input />", {
    type: "number",
    min: "0"
}).addClass("someclass").appendTo($("#someid"));

and this code works fine in static input:

$(document).on("focusout", ".someclass", function(){ alert("hello!");});

But for dynamic input generate infinite loop with the alert, this happen only in Chrome, someone has any idea?

error is when focus go on the other input with the same class

Answer 1

As Terry have stated, the alert box is not the best way to troubleshoot any JS issue.

Replacing alert with console.log() shows that the event is triggered only once in Chrome and other browsers.

$("<input />", {
  type: "number",
  min: "0"
}).addClass("someclass").appendTo($("#someid"));

$(document).on("focusout", ".someclass", function() {
  console.log("alert");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="someclass" />
<div id='someid'>

</div>

See this answer:

I think it's because the the browser is sending focus from the alert to your text field every time you click the alert's "OK" button. You're probably not going to be popping up an alert (methinks) in the final version of your code, so this might not be an issue in the long run.

https://stackoverflow.com/a/6869420/529024