2011-02-07 48 views
1

我想克隆窗体内的div。我的想法是让用户在我的应用程序中插入多个条目。jquery .clone()不工作

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; 

});

这似乎是正确的,但我没有克隆或任何东西。例如,如果我删除克隆功能并发出警报,则会显示警报。

回答

6

当你调用.clone(),它需要被附加的东西。试试这个:

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

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

你必须实际上东西与.clone()返回的值。 jQuery不会将克隆的元素插入到标记中。

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

您需要确保只选择单个div.anotacao每次克隆;否则你最终会得到数量呈指数级增长的克隆!哎呀,忘记removeClass()照顾了!

0

您需要指定您想要的位置appendTo

1

试着在后面加上它

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