jQuery，获取所有克隆输入字段的所有值答案

【问题标题】：jQuery, get all the values of all cloned input fieldsjQuery，获取所有克隆输入字段的所有值
【发布时间】：2015-07-13 02:17:16
【问题描述】：

需要一些帮助或指针来实现以下。单击时克隆输入字段并检索更改时字段的值，以便将它们作为文本粘贴到另一个 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();

    });

});


});

非常感谢大家的帮助！

【问题讨论】：

标签： jquery html clone

【解决方案1】：

由于它们是动态创建的，因此无法以相同的方式选择它们 (see Delegation)。所以你需要：

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

【讨论】：

你的意思是在这个事件中添加功能吗？ $(".clonedInput").on('change', '.changeFields', function() { getValues(); });
这取决于。您想在每次更改某些内容时复制用户的选择吗？像这样fiddle 查看 cmets 以了解其工作原理
感谢您的大力帮助。

【解决方案2】：

如果您的输入在页面启动时被实例化，并且在页面就绪事件触发后没有动态加载，那么您可以使用 clone() 向您的页面添加额外的输入元素。

但是，您需要告诉 jQuery，您不仅要克隆输入元素，还要克隆它的数据和事件侦听器。

通过将您的 clone() 代码更改为以下内容来做到这一点：

$( 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()，或者您喜欢的函数名称。

希望这会有所帮助！

【讨论】：