Problème JQuery : ma fonction "each" ne se rafraîchit pas avec le DOM

Perspikas
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code jQuery. Je vais tenter de vous l'expliquer de façon simple.

J'ai créé une petit appli "calculette/devis" dans un admin Wordpress (avec le plugin ACF ) qui, rangée par rangée, surveille les inputs de chaque ligne.

Avec le "each", je surveille ainsi chaque ("each") rangée. Et je fais la multiplication quantité x prix unitaire = montant
Tout marche bien : quand je bouge une valeur de la rangée, le total de la ligne se calcule et s'affiche
En bas j'ai un bouton "ajouter une ligne", et ca m'affiche une ligne vierge. avec quantité/prix/total vides.

Et c'est là que se situe mon problème :

Ma calculette ne marche plus pour les nouvelles lignes ajoutées (avec le plugin ACF et un repeater, je clique sur "ajouter une ligne")

J'ai l'impression que le "each" ne tient compte que du DOM quand la page s'est chargée. Il ne tient pas compte des éléments nouveaux dupliqués, clonés ou utilisés avec un "append".

J'ai vu juste ou pas ?
Quelqu'un pourrait-il m'aider ?

4 réponses

Pierrot01

Salut,
Il serait inéressant de voir un peu de code ;)
@plus

Pierre

Perspikas
Auteur

Oui désolé.

Je suis ps le meilleur des codeurs, mais voilà mon script.
En gros : 2 scripts identiques, l'un quand on clique sur le champ "qté" et l'autre pour le champ "prix unitaire".
Le champ "ligne totale" est readonly.

$( '.lines-repeater-class .acf-row' ).each(function(j) {
        $(this).find( '.line_qty input' ).bind('keyup change click', function(e){
            quantite = $(this).val();
            prixUnitaire = $(this).closest('.lines-repeater-class .acf-row').find( '.line_unit_price input' ).val();
            totalLigne = (quantite * prixUnitaire).toFixed(2);
            $(this).closest('.lines-repeater-class .acf-row').find( '.line_total_price input' ).val(totalLigne);
        });
        $(this).find( '.line_unit_price input' ).bind('keyup change click', function(e){
            prixUnitaire = $(this).val();
            quantite = $(this).closest('.lines-repeater-class .acf-row').find( '.line_qty input' ).val();
            totalLigne = (quantite * prixUnitaire).toFixed(2);
            $(this).closest('.lines-repeater-class .acf-row').find( '.line_total_price input' ).val(totalLigne);
        });

    });
Pierrot01

Quelle version de jquery ?
a+
Pierre

Perspikas
Auteur

Pour ce code, j'ai utilisé celle par défaut qui est embarquée dans l'admin dans la dernière version de Wordpress.

Je n'ai pas fait d'appel particulier à jQuery.