jQuery, obtenha todos os valores de todos os campos de entrada clonados - jquery, html, clone

Precisa de alguma ajuda ou dicas para alcançar oSegue. Clonando campos de entrada no clique e recuperando os valores dos campos na mudança para que sejam colados como texto em outro div. No entanto, parece funcionar apenas para os campos codificados permanentemente originais (não os clonados). Eu tentei adicionar cada função em vários lugares no código, mas sem sucesso. Meu código está assim por enquanto:

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

e o 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();

});

});


});

Muito obrigado por toda ajuda!

Respostas:

Uma vez que foram criados dinamicamente, não podem ser selecionados da mesma forma (ver delegação) Então você precisa:

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

Se você tiver suas entradas instanciadas na inicialização da página e não forem carregadas dinamicamente após o evento page ready ser disparado, você pode usar clone () para adicionar elementos de entrada adicionais à sua página.

No entanto, você precisa dizer ao jQuery que deseja clonar não apenas o elemento de entrada, mas também seus ouvintes de dados e eventos.

Faça isso alterando seu código clone () para o seguinte:

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

}

Você pode ler mais sobre isso aqui. http://api.jquery.com/clone/

Tenha cuidado ao definir uma função com o mesmonome, embora esteja em um escopo diferente. Isso pode causar confusão para você mais tarde. Melhor chamá-lo de clone_now (), ou clone_once (), ou clone_at_startup (), ou como você quiser nomear suas funções.

Espero que isto ajude!