web-dev-qa-db-fra.com

Utilisation de .each sur des objets dynamiques dans jQuery?

Il y a beaucoup de questions qui semblent poser cette question, mais à la fin, tout ce qu'elles veulent, c'est attacher des événements .click et non pas .each et la réponse généralement acceptée dans chacune d'entre elles inclut $("body").on("click", ".selector", function(){}); et ce n'est certainement pas ce que je veux.

J'ai quelques entrées générées et je dois changer la valeur de chacune en même temps. Normalement, je voudrais $(".inputs").each(function(){$(this).val("new-value")}; ou quelque chose du genre, mais je ne peux pas à cause de l'aspect dynamique.

Alors, comment feriez-vous un $("body").on("each", ".inputs", function(){});?

javascriptjquerydynamicdynamically-generatedeach
29
o_O

En fait, c'est aussi simple que d'exécuter le fichier .each dans setTimout.

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

$.each fonctionne avec tous les nouveaux éléments ajoutés.

http://jsfiddle.net/4SV7n/

Faire quelque chose de différent à chaque fois:

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

3
Samuel Reid

Vous pouvez utiliser $(".inputs").each(function(){$(this).val("new-value")}; parfaitement sur des éléments dynamiques. Il vous suffit de réexécuter le script après avoir ajouté un élément de manière dynamique.

D'après les commentaires, j'ai pensé qu'il existait un malentendu à propos de «chacun». 'Each' n'est pas un événement et aucun événement n'est déclenché si 'each' est appelé. Si vous souhaitez garder une trace des éléments ajoutés parce que vous n'avez aucun contrôle sur leur ajout, vous aurez besoin d'un minuteur:

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

Voici un script bien meilleur qui fait exactement ce que le PO a demandé.

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>

1
Tarmo Saluste