Javascript - Using class to activate events for multiple textboxes

I'm trying to create an AJAX powered form which checks to see if codes are valid. My form starts like this:

<div id="codechecker_container">
<input type="text" class="codechecker" id="code_1" name="codes[]" />
<span id="message_1"></span>
</div>
<input type="submit" id="add_button" value="Add another" />
<input type="submit" value="Submit" />

When clicking the submit button with the id "add_button", the following is appended to the div:

<input type="text" class="codechecker" id="code_2" name="codes[]" />开发者_如何学C;
<span id="message_2"></span>

Then number increments each time it is pressed.

When something is typed into the textbox, the code is checked and a message is displayed based on the result from the AJAX request. I am trying to get each text input / span message pair working independently from each other. However, I can only get the function to work on the original form elements.

I am getting no errors, but nothing is happening at all with the others.

This is what I am using to add the form elements:

$('#add_another_code_button').click(function(event) {
        event.preventDefault();
        var num  = $(this).attr('class');
        var html = 'Voucher Code '+num.toString(10)+':<br /><input type="text" class="codechecker" id="code_'+num.toString(10)+'" name="codes[]" /><span id="message_'+num+'"></span>';
        $('#codechecker_container').append(html);
        $(this).removeClass(num.toString(10));
        num++;
        $(this).addClass(num.toString(10));
    });

And this is what I am using to display the result in the span:

$('.codechecker').keyup( 
        function(k)
        {   
            var voucher_code     = $(this).val();
            var inputarray       = $(this).attr('id').split('_');
            var num              = inputarray[1];
            var holder           = $('#message_'+num.toString(10));

            if (voucher_code.length > 2)
            {   
                $.getJSON('.myajaxurl, function(data)
                {   
                    if (data.voucher.pass == 1)
                    {
                        holder.css({color:'green'});    
                    }
                    else
                    {
                        holder.css({color:'red'});
                    }

                    holder.text(data.voucher.status);
                });
            }
        }
    );

Can anyone help?

Any advice appreciated.

Use $.delegate:

$('#codechecker_container').delegate('.codechecker', 'keyup', function (e) {
    // event handler
});

$('selector') returns an array of DOM elements that does not update when new elements are appended.

Try this...

$('.codechecker').keyup(  
        function(k) 
        {   
                    $('.codechecker').each
                    (
                        function()
                        {
                            var voucher_code     = $(this).val(); 
                            var inputarray       = $(this).attr('id').split('_'); 
                            var num              = inputarray[1]; 
                            var holder           = $('#message_'+num.toString(10)); 

                            if (voucher_code.length > 2) 
                            {    
                                    $.getJSON('.myajaxurl, function(data) 
                                    {    
                                            if (data.voucher.pass == 1) 
                                            { 
                                                    holder.css({color:'green'});     
                                            } 
                                            else 
                                            { 
                                                    holder.css({color:'red'}); 
                                            } 

                                            holder.text(data.voucher.status); 
                                    }); 
                            } 
                        }
        } 
    );