Как проверить динамически добавленные ячейки таблицы HTML, используя JQuery?

Question

Я работаю над веб-приложением, в котором есть таблица HTML с только заголовками, сгенерированными при загрузке. Затем я использую кнопку Добавить, чтобы добавить строки в таблицу с помощью функции JavaScript. В основном таблица имеет 3 столбца, и при добавлении строки я добавляю текстовое поле к каждой ячейке, чтобы иметь 3 текстовых поля для каждого столбца. Эти текстовые поля используются для принятия пользовательских данных, которые впоследствии собираются для отправки на сервер. Однако мне нужно добавить проверку JQuery для каждой из этих ячеек, чтобы пользователь мог вводить только цифры в этих текстовых полях. Я новичок в JQuery и не совсем понимаю, как добавить код в функцию document.ready (), чтобы определить элементы текстового поля, которые будут добавлены позже, с помощью кнопки Добавить и применить к ним проверку. Я пытаюсь что-то вроде этого, но это не похоже на работу!

$(document).ready(function () {

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

});

Буду признателен, если кто-нибудь поможет мне с этим ... Заранее спасибо!

Answer 1

Функция, которую вы запускаете, подключает события при загрузке страницы. Элементы, добавленные впоследствии, не будут подключены.

Обернуть код в свою собственную функцию и вызывать ее после добавления каждой строки таблицы.

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

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