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克隆不能與類選擇器

回答

相關問題