Using .each on dynamic objects in jQuery?

Question

There are lots of questions that seem to be asking this, but in the end all they want is to attach .click events and not .each and so the generally accepted answer in all of them include $("body").on("click", ".selector", function(){}); and this is definitely not what I want.

I have some generated inputs and I need to change the value of each one at the same time. Normally I would $(".inputs").each(function(){$(this).val("new-value")}; or something along those lines, however, I can't because of the dynamic aspect.

So how would you do a $("body").on("each", ".inputs", function(){});?

It would help if you would explain the situation more clearly, because as it stands this question doesn't make much sense. — Pointy
– Pointy, Commented Jul 3, 2013 at 15:09
"because of the dynamic aspect" at some point you want to change the values... when? — Jonathan Naguin
– Jonathan Naguin, Commented Jul 3, 2013 at 15:10

gvlasov · Accepted Answer · 2015-04-23 23:04:27Z

6

Actually, it's as simple as running the .each inside setTimout.

setTimeout(function(){
  $(".inputs").each(function(){$(this).val("new-value")});
}, 5000);

edited Apr 23, 2015 at 23:04

gvlasov

20.3k22 gold badges85 silver badges120 bronze badges

answered Sep 12, 2013 at 1:49

o_O

5,73314 gold badges56 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user938363 Over a year ago

We almost have exactly the same question and was thinking about on initially because .each can not find newly inserted elements. Can you provide more detail about why setTimeout does the magic as .on for dynamically inserted elements?

o_O Over a year ago

setTimeout runs the code after a specific period. So if setTimeout is long enough to run after your inserted elements are in, then it will work. If it runs before your elements are inserted, then it won't work. In the case where the user will be interacting with the screen, it's best not to do anything like I have above because I was doing it on load. If you put your function in another script and then run that you should be ok after all the user interaction is completed.

vooxo Over a year ago

Using setTimeout() is just a hack, and not a real solution...

Samuel Reid · Accepted Answer · 2013-07-03 15:16:18Z

5

$.each works with any new elements added.

http://jsfiddle.net/4SV7n/

Doing something different each time:

http://jsfiddle.net/4SV7n/1/

answered Jul 3, 2013 at 15:16

Samuel Reid

1,7761 gold badge12 silver badges23 bronze badges

3 Comments

o_O Over a year ago

Well of course that works. It would be easy if I had the luxury of calling the script whenever I want. Unfortunately, the point of needing .on benefits is that I don't have that control.

Samuel Reid Over a year ago

Could you make a fiddle that is some sort of attempt at what you're talking about so it's more clear? I'm having hard time figuring out what it is you're trying to do.

Gaurav Aggarwal Over a year ago

this is because you are calling it on click what if we need to fire function without any event

Tarmo Saluste · Accepted Answer · 2018-04-09 08:44:48Z

5

Here is much better script that does exactly what the OP asked.

function doWithInput(i, e){
	$(e).val("done with each");
}

$(document).ready(function(){
    $("#button").click(function(){
       $("#inputs").append("<input class='inputs_new' type='text' /><br />");
    });
  	$(".inputs").each(doWithInput);
});

$(document).on("DOMNodeInserted", ".inputs_new", function(e) {
	$(e.target).removeClass('inputs_new').addClass('inputs');
  doWithInput(0, e.target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
    <input class="inputs" type="text" placeholder='type in me' /><br />
</div>
<button type="button" id="button">Add</button>

answered Apr 9, 2018 at 8:44

Tarmo Saluste

5927 silver badges18 bronze badges

1 Comment

bernhardh Over a year ago

DOMNodeInserted is Deprecated - see developer.mozilla.org/en-US/docs/Web/Guide/Events/…

T.S. · Accepted Answer · 2013-07-03 15:23:45Z

3

You can use $(".inputs").each(function(){$(this).val("new-value")}; perfectly fine on dynamic elements. You just need to rerun the script after you added an element dynamically.

From the comments I figured that some misunderstanding exists about 'each'. 'Each' is not an event and so no event is fired if 'each' is called. If you want to keep track of added elements because you have no control over when they are added you'd need a timer:

setInterval(function(){ $(".inputs").each(function(){$(this).val("new-value")}; },500);

edited Jul 3, 2013 at 15:23

answered Jul 3, 2013 at 15:10

T.S.

1,25213 silver badges23 bronze badges

7 Comments

Pointy Over a year ago

He could do that, but why, when $(".inputs").val("new-value"); works too?

o_O Over a year ago

What if you can't rerun it? I.e. utilize the benefits of body.on?

T.S. Over a year ago

@Pointy I figured he simplified that script, but actually wanted to set the value to something that's different for each input. At o_O, if you are able to add elements dynamically, you are able to run that script again. How would you else add elements dynamically? Some script is required for that right?

Pointy Over a year ago

Yes, true, but .val() can also take a function as a parameter.

Pointy Over a year ago

@o_O the .on() stuff is only for event handling. If there's no event involved, it's irrelevant.

|

SIDU · Accepted Answer · 2019-12-02 05:20:35Z

0

What about this:

http://jsfiddle.net/cudts0f2/

I want the dynamically generated text to take effect on each

answered Dec 2, 2019 at 5:20

SIDU

2,2781 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

Using .each on dynamic objects in jQuery?

5 Answers 5

3 Comments

3 Comments

1 Comment

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related