How to validate dynamically added cells of an HTML table using JQuery?

I am working on a web app that has an HTML table with just headers generated on load. I then use an Add button to add rows to the table using javascript function. Basically the table has 3 columns and while adding a row, I append a textbox to every cell to have 3 textboxes for each column. These textboxes are used to accept user data which is later collected to send to the server. However, I need to add a JQuery validation for each of these cells to allow the user to enter only numbers in these textboxes. I am new to JQuery and do not clearly understand how to add code in the document.ready() function to identify the textbox elements that would be added later on using Add button and apply the validation on them. I am trying something like this but it doesnt seem to work!

$(document).ready(function () {

    $("input[type=text开发者_运维知识库]").live('focusout', validate({
        rules: {                        
            number: true                        
        }
    }));

});

Would appreciate if someone can guide me with this...Thanks in advance!

The function you're running hooks up the events at page load. Items added afterwards won't be hooked up.

Wrap the code in is own function and call it after you add each table row.

$(document).ready(function () {
     setValidation()
});

function setValidation() {
    $("input[type=text]").live('focusout', validate({ rules: {number: true}}));
}