JQuery 克隆不适用于类选择器答案

【问题标题】：JQuery clone is not working with class selectorJQuery 克隆不适用于类选择器
【发布时间】：2017-05-13 16:56:19
【问题描述】：

我正在尝试从按钮的 onClick() 函数中克隆一个跨度。第一次这很好，但是当我第二次尝试时它不是克隆。我做错了什么？

这是我的代码的精髓。

$(document).ready(function(){
    $('.addmachinerow').on('click',function(){

    var edcname =  $('.edc_name option:selected').val();
    var machine_description =   $("input[name='machine_description'").val();
    var capacity =   $("input[name='capacity'").val();
    var voltage_level =   $("input[name='voltage_level'").val();
    var powertype =  $("select[name='typeofpower'").val();
    var edcautovalue = $('.ecaddingspan').attr('data-value');

//if($('#bank_increment').html() == '')  $('#bank_increment').html('0');   else  $('#bank_increment').html(parseInt($('#bank_increment').html())+1);

//if($('#bank_clickededit').html() == '') var bank_increment =  $('#bank_increment').html(); else  var bank_increment = $('#bank_clickededit').html();


$('.ecaddingspan').clone().appendTo('.edcparent');
//$('.bankname, .bankbranch , .IFSCcode , .bankaccno , .accsincefrom').val('');

 var edc_details = {'edcname' : edcname, 'machine_description' : machine_description, 'capacity' : capacity, 'voltage_level' : voltage_level, 'powertype' : powertype }
//$('.bank_details_array').append(JSON.stringify(bank_details)+'&&');
    });
});

另外：

如何在单击“全部克隆”按钮时克隆整个集合？

我需要将值保存在具有不同名称的数组中。这可能吗？

【问题讨论】：

当您克隆“.ecaddingspan”元素时，您会创建另一个元素。下次您的选择器会发现 2 个元素而不是一个，因此您可能需要使用第一个选择器。
怎么做？我哪里出错了？
查看我的回答以了解您的第一个问题。请编辑您的问题并删除第 2 部分和第 3 部分，然后针对这些要点打开另一个问题。多部分的问题会让以后的读者感到困惑。

标签： javascript jquery

【解决方案1】：

如何在单击“总克隆”按钮时克隆整个集合？

您必须改用事件延迟on()：

$('body').on('click','.addmachinerow', function(){
   //Event code
})

由于新的.addmachinerow在克隆后动态添加到页面中。

我需要将值保存在不同名称的数组中，这可能吗？

我建议使用数组名[] like：

<input name='machine_description[]' />
<input name='voltage_level[]' />

希望这会有所帮助。

【讨论】：

它工作正常:)。但是我得到了重复我怎么能避免那个？
你能帮我做演示吗
如何使用 jquery 获取值并保存在数组中？用这个machine_description[]
你能检查一下小提琴链接吗？ && 小提琴链接 = jsfiddle.net/0z88cwtw
你想向php页面发送数据吗？

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
   
       $('.cloneitem').not('.cloned').clone().addClass('cloned').appendTo('body');
    });
});
</script>
</head>
<body>

<p class="cloneitem">This is a paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

【讨论】：

不正确 - 单击克隆按钮两次会使段落加倍！
更好 - 但 OP 使用的是类选择器 - 而不是 id。 ID 选择器将仅使用第一个匹配元素，而类选择器将处理所有匹配元素。这是OP问题的根源。再试一次。
变得更好但并没有真正解释 OP 的核心问题。看我的回答。

【解决方案3】：

这个问题是对 JQuery 选择器的常见误解。如果您使用 ID 选择器然后切换到类选择器，那么您通常不会注意到行为上的差异。 ID selector 文档说

ID 选择器：如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中的第一个匹配元素

而class selector

类选择器：选择具有给定类的所有元素。

这意味着，当您克隆目标元素时，您会选择后续的 ID（JQuery 忽略重复项），但如果您不希望 JQuery 返回多个匹配项，那么后续的类选择会绊倒您。类选择器非常适合对元素进行分组，但不适合克隆。

当我在肥皂盒上时 - 每当您使用克隆功能时，您都应该考虑并修复您正在生成的潜在重复 ID 和不需要的类重复。重复的 ID 绝对是不好的表现 - 重复的类实际上可能是设计使然，但您仍然应该考虑它们。

在下面的代码示例中，我将类 iAmSpartacus 分配给 onClick() 函数随后克隆的原始范围。每个克隆还获得iAmSpartacus 类，因此我将其从每个新克隆中删除，以确保$(".iAmSpartacus") 选择器始终返回最多一个元素。跨度显示了它们当前的class 属性来证明这一点。

// this runs one - shows us classes of original span
var origSpan=$(".iAmSpartacus")
origSpan.html("My classes are: " + origSpan.prop("class")) 

$("#daButton").on("click", function(e) {
  
  var newSpan = $(".iAmSpartacus").clone();
  newSpan.removeClass("iAmSpartacus");  // remove the dup targetting class
  newSpan.appendTo('.edcparent');
  newSpan.html("My classes are: " + newSpan.prop("class")) 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="daButton">Click me</button>
<div class="edcparent" style="border: 1px solid red;">
    <span class="ecaddingspan iAmSpartacus" style="display: block;">I am a span</span>  
</div>

【讨论】：