How to select element after Ajax Load?

Question

I have inputs in my html:

<input type="text" id="1" value="1" name="1">
<input type="text" id="2" value="2" name="2">

And than i use ajax and load put another one input:

<input type="text" id="3" value="3" name="3">

There is javascript file with code:

$('input[type=text]').focusin(function() {
    var Id = this.id;
    someActionWithId(Id);
}).focusout(function(){
    var Id = this.id;
    someActionWithId(Id);
});

Can some one tell me why i cant pick input that is loaded by AJAX. Maybe some one can suggest some solution? Thanks.

Answer 1

You need to bind event for dynamically loaded elements like this :

$(document).on('focusin','input[type=text]',function() {
    var Id = this.id;
    someActionWithId(Id);
});
$(document).on('focusout','input[type=text]',function(){
    var Id = this.id;
    someActionWithId(Id);
});