jQuery, получи всички стойности на всички клонирани полета за въвеждане - jquery, html, clone

Нуждаете се от помощ или указатели, за да постигнетеследваща. Клониране на полета за въвеждане при щракване и извличане на стойностите на полетата при промяна, така че да бъдат поставени като текст в друг div. Изглежда обаче, че работи само за оригиналните твърдо кодирани полета (не за клонираните). Опитах се да добавя всяка функция на няколко места в кода, но без да има полза. Кодът ми изглежда така:

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

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

});

});


});

Благодаря ви много за цялата помощ!

Отговори:

Тъй като те са създадени динамично, те не могат да бъдат избрани по същия начин (виж Делегация). Така че трябва:

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

Ако при стартиране на страницата ви се въвеждат входни данни и не се зареждат динамично след задействане на събитието за готовност на страницата, тогава можете да използвате clone (), за да добавите допълнителни входни елементи към страницата си.

Трябва обаче да кажете на jQuery, че искате да клонирате не само входния елемент, но и неговите слушатели на данни и събития.

Направете това, като промените своя клон () код на следното:

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

}

Повече за това можете да прочетете тук. http://api.jquery.com/clone/

Бъдете внимателни, когато дефинирате функция със същатаиме, въпреки че е в различен обхват. Това може да предизвика объркване за вас по-късно. По-добре да го наричате clone_now (), или clone_once (), или clone_at_startup (), или както искате да назовавате функциите си.

Надявам се това да помогне!