У меня есть один вход с классом validate, и я добавляю больше с тем же классом динамически.

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

Это рабочее событие срабатывает для всех добавленных входных данных, но не приносит значения. Если я использую:

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

Значение в порядке, но работает только для первого ввода. Должен ли я поместить это на $(document).ready(function() {});? Я пытался, но тот же результат.

3
rgomez 13 Дек 2016 в 21:54

3 ответа

Лучший ответ

change() не будет работать, поскольку элементы генерируются динамически, поэтому вы должны использовать делегирование события .on() , как показано в первом примере для их решения:

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

Надеюсь это поможет.

2
Zakaria Acharki 13 Дек 2016 в 18:57

Если ваш код Java Script начинается до HTML-тегов, над которыми вы будете работать, то вам нужно это - $ (document) .ready (function () {}); - сказать двигателю, что начать работу как можно скорее. (событие onload происходит позже, когда весь контент (например, изображения) также был загружен). Если JS код в конце HTML, то эта функция не имеет смысла.

Но для динамически генерируемого элемента вы должны использовать

$(document).on('action','selector',function(){});

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

Что касается селекторов, передовая практика говорит, что для

  • для уникальных элементов используйте «ID»
  • в целях дизайна используйте «класс»
  • Для похожих динамических элементов используйте «атрибут»
0
Musa 13 Дек 2016 в 19:23

Вы передали jQuery object в качестве второго параметра on, но вы можете прочитать здесь это должно быть selector:

$(element).on( events [, selector ] [, data ], handler )

Итак, как вы можете себе представить, решение @ Zakaria будет работать (, если вы используете jQuery +1.7 ), в противном случае вам нужно использовать делегат.

Связано с stackoverflow:

0
Community 23 Май 2017 в 12:24