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(){});?

Solution 1

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

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

Solution 2

$.each works with any new elements added.

http://jsfiddle.net/4SV7n/

Doing something different each time:

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

Solution 3

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>

Solution 4

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);

View more solutions

Comments

[Pointy]

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

[o_O]

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

[T.S.]

@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]

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

[Pointy]

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

[o_O]

I did simplify, however, nothing normal is working. If I'm working within a CMS that is running all the scripts and generating all the content, I don't have the necessary control to rerun.

[T.S.]

Pointy, I didn't know it accepted a function, in that case you're right.

[o_O]

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]

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.

[user938363]

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]

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.

[Gaurav Aggarwal]

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

[vooxo]

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

[bernhardh]

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