jQuery, सभी क्लोन इनपुट फ़ील्ड के सभी मान प्राप्त करें - jquery, html, क्लोन

को प्राप्त करने के लिए कुछ मदद या संकेत की आवश्यकता हैनिम्नलिखित। क्लिक पर इनपुट फ़ील्ड को क्लोन करना और परिवर्तन पर फ़ील्ड के मूल्यों को पुनः प्राप्त करना ताकि वे पाठ के रूप में एक और 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>

और जेएस:

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

यदि आपके पास पृष्ठ स्टार्टअप पर त्वरित रूप से इनपुट्स हैं और पृष्ठ तैयार होने की घटना के बाद गतिशील रूप से लोड नहीं किया गया है, तो आप अपने पृष्ठ पर अतिरिक्त इनपुट तत्वों को जोड़ने के लिए क्लोन () का उपयोग कर सकते हैं।

हालाँकि, आपको 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 (), या फिर भी आप अपने कार्यों को नाम देना पसंद करते हैं।

उम्मीद है की यह मदद करेगा!