JQuery克隆不能与类选择器

我想克隆按钮的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)+'&&'); 
    }); 
});

此外：

我如何可以克隆上单击总克隆按钮上的完整套？

我需要使用不同的名称保存数组中的值。那可能吗？

来源

2016-12-29 Question User

当克隆创建另一个 “.ecaddingspan” 元素。下一次你的选择器找到2个元素而不是1个，所以你需要使用第一个选择器。 –

该怎么做？我会去哪里错？ –

请参阅我的回答以解释您的第一个问题。请编辑您的问题并删除第2和第3部分，并在这些问题上打开另一个问题。多部分问题会让后来的读者感到困惑。 –

如何克隆整个集上点击总克隆按钮？

您对使用事件delagtion on()代替：

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

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

我需要用不同名称保存数组中的值是可能的吗？

我建议使用数组名[]一样的：

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

希望这有助于。

来源

2016-12-29 11:10:18

其工作正常:)。但即时通讯重复我怎样才能避免那一个？ –

你能帮我演示 –

如何获取值并使用jquery保存在数组中？用这个'machine_description []' –

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

来源

2016-12-29 11:11:03

不正确 - 单击克隆按钮两次给出两倍的段落！ –

更好 - 但OP是使用类选择器 - 而不是一个ID。 ID选择器将仅使用第一个匹配元素，而类选择器将处理所有匹配元素。这是OP问题的根源。再试一次。 –

请检查一次... –

的问题是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>

来源

2016-12-29 11:40:19

JQuery克隆不能与类选择器

回答

相关问题