jQueryのクローンは、私は、ボタンのonClickの（）関数からスパンのクローンを作成しようとしています

FiddlejQueryのクローンは、私は、ボタンのonClickの（）関数からスパンのクローンを作成しようとしています

クラスセレクタで作業されていません。初めてこれはうまく動作しますが、2回目にしようとするとクローン化されません。私は間違って何をしていますか？

ここに私のコードの本質があります。

さらに

$(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" 要素のクローンを作成する場合。次にセレクタの周りに1つではなく2つの要素があるので、おそらく最初のセレクタを使う必要があります。 –

どうすればいいですか？どこが間違っているの？ –

あなたの最初の問題の説明については私の答えを見てください。質問を編集してパート2とパート3を削除し、それらのポイントで別の質問を開きます。マルチパートの質問は、後の読者にとって混乱します。 –

[クローンの合計]ボタンをクリックすると、セット全体をどのようにクローンできますか？新しい.addmachinerowが動的にクローン後のページに追加しているので
$('body').on('click','.addmachinerow', function(){ 
    //Event code 
}) 
：

あなたは代わりにイベントdelagtion on()を使用するようにしました。

異なる名前の配列に値を保存する必要がありますか？このことができます
<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

正しくない - クローンボタンを2回クリックすると、段落が2倍になります！ –

より良い - しかし、OPはクラスセレクタを使用しています - idではありません。 IDセレクタは最初に一致する要素のみを使用し、クラスセレクタはすべての一致する要素を処理します。これがOPの問題の原因です。再試行する。 –

一度確認してください... –

問題は、jQueryのセレクタの一般的な誤解です。 IDセレクタを使用して演奏し、クラスセレクタに切り替えると、動作の違いに気づかないことがよくあります。用しながら、複数の要素が同じIDを割り当てられている場合は、使用するクエリはIDのみをDOMに最初マッチした要素を選択すること

：ID selectorドキュメントは

IDセレクターを語りますclass selector

クラスセレクタ：指定されたクラスを持つすべてのの要素を選択します。

これが意味することは、ターゲット要素のクローンを作成するときに、後続のIDを選択して逃げる（jQueryの重複を無視します）が、あなたは複数の一致を返すためのjQueryを予想していなかった場合、その後のクラス選択があなたをつまずかせるということです。クラスセレクタは、要素をグループ化するのには適していますが、複製にはあまり適していません。

私は石鹸ボックスを使用していますが、クローン機能を使用するときは、潜在的な複製IDと作成している不要なクラス複製を修正して修正する必要があります。重複IDは間違いなく悪いことですが、重複したクラスは実際には設計上のものかもしれませんが、それでも考慮する必要があります。

以下のコードサンプルでは、onClick（）関数が複製する元のスパンにクラスiAmSpartacusを割り当てます。各クローンはiAmSpartacusクラスも取得するので、$(".iAmSpartacus")セレクタが常に最大1つの要素を返すように、新しいクローンごとにクローンを削除します。スパンは現在の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のクローンは、私は、ボタンのonClickの（）関数からスパンのクローンを作成しようとしています

答えて

関連する問題