验证新创建的输入

Question

I'm using small attachment form with dynamically created inputs.

These new inputs are created this way:

function addAttachmentRow() {
    var htmlRow = '<tr><td><input type="text" name="file_name[]"></td></tr>';
    $("#attachment_list").append(htmlRow);
}

and I am trying to prepare validating function, but this code:

$( document ).ready(function() {
    $('input[name^="file_name"]').each(function() {
        $(this).keydown(function(){ 
            if ($(this).val().length < 2) {
                $(this).css("background-color", "#FFCCCC");
                $(this).css("border", "1px solid #665252");
                $(this).css("color", "#B20000");
            } else {
                $(this).css("background-color", "#F5FFEB");
                $(this).css("border", "1px solid #5CE65C");
                $(this).css("color", "#145214");
            }
        }); 
    });
});

but it only applies to the very first element which is created statically. It does not effect elements, created when "addAttachmentRow" is clicked and new input added.

Changing it to

$('input[name^="file_name[]"]').each(function() {

doesn't help either, and I just need to have [] in input's name.

Any ideas?

Thanks in advance.

Answer 1

Yes. It happens. It doesn't select the element with that code. You will need to use $(document).on method instead of this.

Solution :

Use this code

$(document).on('event', 'selector', function() {
    // code
});

eg

$(document).on('each', 'input[name^="file_name[]"]', function() {
    alert('Event fired!');
});

Answer 2

You need to bind event with the document for dynamic elements:

$(function(){
  $(document).on('keydown', 'input[name^="file_name"]', function(e) {
    /* to do here */
  });
});

Try this demo:

 $(function() { $(document).on('keydown', 'input[name^="file_name"]', function(e) { var err = 2 > $.trim(this.value).length; $(this).toggleClass('rest', !err).toggleClass('err', err); }); }); function addAttachmentRow() { var htmlRow = '<tr><td><input type="text" name="file_name[]"></td></tr>'; $("#attachment_list").append(htmlRow); } 

 .rest { background-color: #F5FFEB; border: 1px solid #5CE65C; color: #145214; } .err { background-color: #FFCCCC; border: 1px solid #665252; color: #B20000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type='button' value='Add' onclick='addAttachmentRow()' /> <table id='attachment_list'> </table>