jquery .clone（）が動作しない

Question

フォーム内でdivを複製しようとしています。私の考えは、ユーザーが私のアプリに複数のエントリーを挿入できるようにすることです。

div .anotacaoには、ユーザーが入力する必要があるすべてのフィールドが含まれています。だから私は一度にn個のエントリーを挿入することができます。

<div class="anotacao"> 
      <div class="field"> 
      <input id="date" name="date" value="<?=date('d/m/Y');?>" class="date" /> 
      </div> 

      <div class="field"> 
      <span class="label">às</span> 
      <input id="hour" name="hour" value="<?=date('h');?>" class="smallest" /> 
      <span class="label">:</span> 
      <input id="minutes" name="minutes" value="<?=date('i');?>" class="smallest" /> 
      </div> 

      <div class="field"> 
      <?=form_dropdown('event',$this->entry->list_events(),'','id="event" class="event select"');?> 
      </div> 

      <div class="field valor"> 
      <input id="valor" name="valor" value="anotação" class="entry" /> 
      <span class="show-type"></span> 
      </div> 

      <div class="field obs"> 
      <input id="obs" name="obs" value="obs" class="obs" /> 
      </div> 
     </div> 

これを複製するには、.add-lineクラスのリンクがあります。ユーザーがこのリンクをクリックすると、私はこれを呼び出すことによって、DIVのクローンを作成しようとJS：

$('.add-line').live('click', function(event){ 
$('.anotacao').clone().removeClass('anotacao'); 
return false; 

を}）;

これはすべて正しいと思われますが、クローンや何も得られません。クローン機能を削除してアラートを表示すると、アラートが表示されます。

Answer 1

を追加

Answer 2

実際にを実行する必要があります。.clone()によって返された値を持つものがあります。 jQueryは、クローンされた要素をマークアップに挿入しません。

$('.add-line').live('click', function(event){ 
    var $source = $('.anotacao'); 
    $source.clone().removeClass('anotacao').after($source); 
    return false; 
}); 

は、あなただけのたびにクローン化するために、単一のdiv.anotacaoを選択して確認する必要があります。さもなければ、指数関数的に増加するクローン数で終わるでしょう！おっと、removeClass()が世話をしたのを忘れてしまった！

Answer 3

appendToとする場所を指定する必要があります。あなたはそれが何かに追加する必要があります）.cloneを（呼び出すと、それ

$(this).append($('.anotacao').clone().removeClass('anotacao')); 

Answer 4

してみてください。試してみよう：

$('.add-line').live('click', function(event){ 
    $('.anotacao').clone().appendTo('#anotacao-container'); 
    return false; 
}); 

<div id="anotacao-container"> 
    <div class="anotacao"> 
    ... fields here  
    </div> 
</div>