How to jquery go through the generated fields each'eat?

Go through the newly-created fields so
$('body').on('focusout', '.inp', function () {
 sumTypes = 0;
 $('.inp').each(function () {
 sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
 });

All wonderful works

But when I want to do in $(document).ready(function() nothing comes out. The fact that they can be created '.inp', for example when you change forms.
$(document).ready(function() {
 sumTypes = 0;
 $('.inp').each(function () {
 sumTypes += parseInt($(this).val()); //put here alert($(this).val()); no output when the page is loaded
});
 $('.summ-types').text(sumTypes); 
});

In the end '.summ-types' 0.
July 9th 19 at 12:54
2 answers
July 9th 19 at 12:56
$(body).on('each', '.inp', function .... ? - watson_Torphy commented on July 9th 19 at 12:59
no. give more code for example - meggie commented on July 9th 19 at 13:02
: If not code, then '.inp' is added to the page dynamically. When creating a fully created, when editing changes. '.inp' was originally there on the page, in any case falls from jquery. - watson_Torphy commented on July 9th 19 at 13:05
July 9th 19 at 12:58
For dynamically added elements, you need to use delegated event handling.
$('paren_static_element').on('event', 'child_dinamic_elemnet', function(){

});

Where:
  • paren_static_element the parent element, which is initially present in the DOM
  • event - the event (your K. O.)
  • child_dinamic_elemnet - child element(s), including dynamically added, which sets up an event handler
in the first case I did and it works, and in the second case if you do $(window).on('load', '.inp', function() {
sumTypes = 0;
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});
nothing comes out - watson_Torphy commented on July 9th 19 at 13:01
this is understandable, because the load event works for images, frames, scripts etc. What is your purpose in trying to apply this event? If you need to dynamically "catch" changes in the structure of the DOM, you can do this using MutationObserver. If elements are added dynamically using ajax, even without much fuss, after a successful query, you can call the function that will "read" the items you want. In General, the way enough, but what's your aim and what you want to get in the end - for us remains a mystery. - meggie commented on July 9th 19 at 13:04
: initially the goal was to create a report on the form are dynamically added input fields (each field is responsible for a certain type of consumption). And to calculate the total amount on the fly I used:
$('body').on('focusout', '.inp', function () {
sumTypes = 0;
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});
where each new dynamically added element has the class inp

Now there was a need to make the change on the report when the page loads the changes from the database the data taken on all charges and are dynamically added to the page duck here in this case I have no focusout immediately to calculate the sum of all these costs, you can certainly calculate it on the server, but this is another option how to change and create because you use the same view file.
There is another option, same jquery to do the trick and remove it, then it should work event focusout count and the sum as when you add, I'll try, just this thought came to mind. - watson_Torphy commented on July 9th 19 at 13:07
if just when the page loads, then just do:
$(function(){
 // here your code 
 var sumTypes = 0;
 $('.inp').each(function () {
 // ...
});
});
- watson_Torphy commented on July 9th 19 at 13:10
: c focus() and focusout() nothing came of it ((( because again does not see the dynamic fields are added.
I tried $(function(){...} just puts 0 totals - simone.Smith77 commented on July 9th 19 at 13:13
no focus or other events is not necessary. I gave you an example above. - watson_Torphy commented on July 9th 19 at 13:16
: Dak not running Your example, I'll write.
Do this and nothing appears
$(function() {
sumTypes = 0;
$('.inp').each(function () {
alert('1');
});
$('.summ-types').text(sumTypes);
});

And shows 1
$(function() {
sumTypes = 0; alert('1');
$('.inp').each(function () {
sumTypes += parseInt($(this).val());
});
$('.summ-types').text(sumTypes);
});

So he can not just refer to the dynamic added elements of just functions. And by the way I'm NOT doing this in $(document).ready(function(){ ... }
Tried it, same result. - simone.Smith77 commented on July 9th 19 at 13:19
in short , see the example. It works when the page loads, and dynamic elements. - watson_Torphy commented on July 9th 19 at 13:22
: very strange I did not work so
$(document).ready(function(){
add '.inp' //inp are added to the page
}

$(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);
} - simone.Smith77 commented on July 9th 19 at 13:25
Made calculation of the amount on the server - watson_Torphy commented on July 9th 19 at 13:28
will make another attempt. First, the two designs below - are absolutely identical.
$(document).ready(function(){
 // ...
});

$(function() { 
 // ...
});
Therefore, to create such a few, at least, pointless. But even if more than one, then everything will work. Second, your code has syntax errors, what was supposed to notify the console if it was open. We look at an example. - simone.Smith77 commented on July 9th 19 at 13:31

Find more questions by tags jQuery