jQuery, obtenez toutes les valeurs de tous les champs d'entrée clonés - jquery, html, clone

Besoin d’aide ou de conseils pour atteindre les objectifsSuivant. Clonage des champs de saisie au clic et récupération des valeurs des champs de modification afin qu'ils soient collés sous forme de texte dans un autre div. Cependant, cela ne semble fonctionner que pour les champs codés en dur d'origine (pas ceux clonés). J'ai essayé d'ajouter chaque fonction à plusieurs endroits dans le code, mais sans résultat. Mon code ressemble à ceci pour l'instant:

<div class="cartWrapper">
<div class="clonedInput">

<label for="chipsCategory" class="">Chips Category <span class="requiredField">*</span></label>
<select class="categoryName1 changeFields" name="chipsCategory">
<option value="Kraks">Kraks</option>
<option value="Curls">Curls</option>
<option value="Crisps">Crisps</option>
</select>

<label for="chipsTaste" class="">Choose Taste <span class="requiredField">*</span></label>
<select class="chipsTaste1 changeFields" name="chipsTaste">
<option value="brand_1">Brand 1</option>
<option value="brand_2">Brand 2</option>
<option value="brand_3">Brand 3</option>
</select>

<label for="chipsQty">Quantity <span class="requiredField">*</span></label>
<input type="number" value="1" class="changeFields chipsQty" name="chipsQty[">


</div>

<button class="clone">Clone</button>

</div>
</div>
<div id="pasteItems"></div>

et le js:

$( document ).ready(function() {

function clone(){

$(".clonedInput:first")
.clone()
.appendTo(".cartWrapper")
.each(function(){})
.on("click","button.clone",clone).append("<button class="remove">Remove</button>")
.on("click","button.remove",remove);
}

function remove(){
$(this).parents(".clonedInput").remove();
}

$("button.clone").on("click", clone);

$("button.remove").on("click", remove);


function getValues() {

var categoryName = $(".categoryName1").val();

var chipsTaste = $(".chipsTaste1").val();

var chipsQty = $(".chipsQty").val();

$("#pasteItems").text(categoryName + " " + chipsTaste + " " + chipsQty);

}

getValues();

$(".changeFields").change(function(){

$(this).each(function(){

getValues();

});

});


});

Merci beaucoup pour toute aide!

Réponses:

Comme ils ont été créés dynamiquement, ils ne peuvent pas être sélectionnés de la même manière (voir délégation). Donc vous avez besoin de:

 $(".cartWrapper").on("change", ".changeFields", function() {
//do what you need to with the value of the cloned input
});

Si vos entrées sont instanciées au démarrage de la page et ne sont pas chargées dynamiquement après le déclenchement de l'événement page prête, vous pouvez utiliser clone () pour ajouter des éléments d'entrée supplémentaires à votre page.

Cependant, vous devez indiquer à jQuery que vous souhaitez cloner non seulement l'élément d'entrée, mais aussi ses écouteurs de données et d'événements.

Pour ce faire, modifiez votre code clone () comme suit:

$( document ).ready(function() {

// clone(true,true) means -> .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
function clone(){

$(".clonedInput:first")
.clone( true, true )
.appendTo(".cartWrapper")
.each(function(){})
.on("click","button.clone",clone).append("<button class="remove">Remove</button>")
.on("click","button.remove",remove);

}

Vous pouvez en lire plus à ce sujet ici. http://api.jquery.com/clone/

Soyez prudent lorsque vous définissez une fonction avec le mêmenom, même si elle est dans une autre portée. Cela peut causer de la confusion pour vous plus tard. Mieux vaut l'appeler clone_now (), ou clone_once (), ou clone_at_startup (), ou comme vous voulez nommer vos fonctions.

J'espère que cela t'aides!