Подсчет динамически создаваемых html-элементов с помощью jquery

я подсчитываю количество входов в текущий документ, которые имеют значение. Он отлично работает, за исключением случаев, когда я динамически добавляю больше входов. Я не могу получить там значения.

например, я, возможно,

<input id="participant-1"/>
<input id="participant-2"/>
...

динамически созданный после нажатия кнопки

<input id="participant-15" />

я получу значение каждого из них в цикле for, как

for(var i =1 ; i <25; i++)
{
  ...$('input#participant-' + i).val();
}

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

НОВЫЙ ВОПРОС хорошо, теперь я думаю, что здесь мне нужно больше разъяснений относительно того, как использовать .на.

у меня есть jsfiddle здесь: пример JsFiddle

где я создаю новые элементы и размытие всех текстовых полей, которые я хотел бы подсчитать, сколько элементов имеют значение и журнал. Теперь он в настоящее время будет реагировать на событие размытия с элементами, которые были статическими. Это не работает для динамически созданных элементов

8
dynamically-generated javascript jquery onclick

3 ответов

дайте ему общий класс:

<input class="textbox" id="participant-1"/>
<input class="textbox" id="participant-2"/>

и сделать это так:

var values = [];
$('.textbox').each(function(){
    values.push($(this).val());
});
console.log(values)

и ответить на редактирование:

синтаксис должен быть : $(container_selector).on (event_type, target_selector, обратный вызов)

Демо JSFiddle

$('.name').on('blur', 'input', calculate_total);
8

можно также рассмотреть использование селектора атрибутов CSS.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

    $("input[id|=participant]").each(function(){
            // something
    });
2

использование селектора классов сэкономит время здесь.

<input id="participant-1" class="participant"/>
<input id="participant-2" class="participant"/>

затем используйте простой вызов count...

var count = $('.participant').length
alert ('You have ' + count + ' Counted Inputs');
//result is 2

надеюсь, что вы найдете это полезным

-2