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

Gabey

Why does it matter if they are dynamic? – Rotter

It would help if you would explain the situation more clearly, because as it stands this question doesn't make much sense. – Bellhop

"because of the dynamic aspect" at some point you want to change the values... when? – Maladjustment

Simply do the .each in the callback handler. – Soutor

Answer 1

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

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

Gabey

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? – Jospeh

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. – Gabey

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

Answer 2

$.each works with any new elements added.

http://jsfiddle.net/4SV7n/

Doing something different each time:

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

Gagliano

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. – Gabey

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. – Gagliano

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

Answer 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>

Valeda

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

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

Envelope

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

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

@Bellhop 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? – Envelope

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

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

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. – Gabey

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

Answer 5

What about this:

http://jsfiddle.net/cudts0f2/

I want the dynamically generated text to take effect on each

Lunette