Как в jquery пройтись по созданным полям each'ем?

Question

[Лев К]

Иду по только что созданным полям вот так

$('body').on('focusout', '.inp', function () {
        sumTypes = 0;
        $('.inp').each(function () {
            sumTypes += parseInt($(this).val());
        });
        $('.summ-types').text(sumTypes);
    });

Все замечательно срабатывает

Но когда я тоже самое хочу сделать в $(document).ready(function() ничего не выходит. Дело в том, что могут быть уже созданные '.inp', например при изменении формы.

$(document).ready(function() {
        sumTypes = 0;
        $('.inp').each(function () {
            sumTypes += parseInt($(this).val()); //ставил сюда alert($(this).val()); ничего не выдает при загрузке страницы
        });
        $('.summ-types').text(sumTypes);  
});

В итоге в '.summ-types' 0.

Answer 1

[Денис]

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

$('paren_static_element').on('event', 'child_dinamic_elemnet', function(){

});

Где:

• paren_static_element - родительский элемент, который изначально присутствует в DOM
  
• event - событие (ваш К.О.)
  
• child_dinamic_elemnet - дочерний элемент(ы), в том числе и динамически добавленные, на которые устанавливается обработчик события
  

Comments

[Лев К]

Денис в первом случае я так и сделал и все работает, а во втором случае если делаю $(window).on('load', '.inp', function() {
sumTypes = 0;
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});
ничего не выходит

[Денис]

Лев К это и понятно, т.к. событие load работает для изображений, фреймов, скриптов и т.д. Какую цель вы преследуете, пытаясь применить это событие? Если вам нужно динамически "отловить" изменения структуры DOM, то это можно сделать с помощью объекта MutationObserver. Если элементы добавляются динамически с помощью ajax, то даже без лишних телодвижений, после успешного завершения запроса, можно вызвать функцию, которая должна "перечитать" нужные вам элементы. В общем, способов достаточно, но какую цель преследуете вы и что хотите получить в итоге - для нас остаётся загадкой.

[Лев К]

Денис: изначально цель была создать отчет : на форме динамически добавляются поля ввода (каждое поле отвечает за определенный вид расхода). И чтобы подсчитать общую сумму "на лету" я использовал:
$('body').on('focusout', '.inp', function () {
sumTypes = 0;
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});
где каждый новый динамически добавленный элемент имеет класс inp

Сейчас же возникла необходимость делать изменение отчета, при загрузке страницы изменения из БД берутся данные о всех расходах и динамически добавляются на страницу, дак вот в таком случае мне нужно без focusout сразу подсчитать сумму всех этих расходов, можно конечно подсчитать это на сервере, но это лишний параметр как для изменения так и для создания, потому что используется один и тот же файл представления.
Есть еще вариант, этим же jquery сделать фокус и убрать его, тогда должно сработать событие focusout и посчитается сумма как при добавлении, пойду попробую, только что эта мысль пришла в голову.

[Денис]

Лев К если просто при загрузке страницы, то делаете просто:

$(function(){
    // тут ваш код 
    var sumTypes = 0;
    $('.inp').each(function () {
        // ...
    });
});

[Лев К]

Денис: c focus() и focusout() ничего не вышло ((( т.к. снова не видит динам добавленные поля.
Попробовал $(function(){...} просто добавляет 0, не суммирует

[Денис]

Лев К никаких focus или других событий не нужно. Я вам пример привел выше.

[Лев К]

Денис: дак не работает Ваш пример, я ж написал.
Делаю вот так и ничего не выводит
$(function() {
sumTypes = 0;
$('.inp').each(function () {
alert('1');
});
$('.summ-types').text(sumTypes);
});

А так показывает 1
$(function() {
sumTypes = 0; alert('1');
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});

Значит он не может так же обратиться к динам добавленным элементам из просто функции. И кстати я делаю это НЕ в $(document).ready(function(){ ... }
Пробовал и в нем, результат тот же.

[Денис]

Лев К , короче, смотрите пример. Работает и при загрузке страницы, и с динамическими элементами.

[Лев К]

Денис: очень странно у меня не работает так
$(document).ready(function(){
add '.inp' //здесь добавляю inp на страницу
}

$(function () {
calculate();
$('body').on('focusout', '.inp', function () {
calculate();
});
});

function calculate() {
var sumTypes = 0;
$('.inp').each(function (i, elem) {
sumTypes += parseInt($(elem).val());
});
$('.summ-types').text(sumTypes);
}

[Лев К]

Сделал подсчет суммы на сервере

[Денис]

Лев К , сделаю еще одну попытку. Во-первых, две конструкции ниже - абсолютно идентичны.

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

$(function() { 
    // ...
});

Поэтому создавать таких несолько, по крайней мере, бессмысленно. Но даже если их несколько, то всё будет работать. Во-вторых, в вашем коде есть синтаксические ошибки, о чём должна была вас проинформировать консоль, если бы она была открыта. Смотрим пример.

Answer 2

[Михаил]

stackoverflow.com/questions/16462052/jquery-event-...

Comments

[Лев К]

Михаил $(body).on('each', '.inp', function .... ?

[Михаил]

Лев К: нет. приведите больше кода для примера

[Лев К]

Михаил: Если вообще кода, то '.inp' добавляется на страницу динамически. При создании полностью создается все, при редактировании изменяется. '.inp' изначально нет на странице, в любом случае попадает из jquery.