Dynamic Added Inputs

Question

I have one input with class validate and I'm appending more with same class dynamically.

$('body').on('change', $('.validade'), function() {
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

This works event fires for all inputs added but does not bring the value. If I use:

$(".validate").change(function(){
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

The value is ok but only works for the first input. Should I place this on the $(document).ready(function() {});? I've tried but same result.

Answer 1

The change() will not work since the elements are dynamically generated, so you should use the event delegation .on() as you show in the first example to deal with them :

$('body').on('change', '.validade', function() {
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

Hope this helps.