jquery .clone()不工作

时间:2011-02-07 20:00:39

标签: jquery clone

我正在尝试克隆表单中的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类的链接。当用户单击此链接时,我尝试通过调用此JS来克隆div:

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

});

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

4 个答案:

答案 0 :(得分: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 :(得分:1)

您必须使用.clone()返回的值实际执行。 jQuery不会将克隆元素插入到标记中。

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

您需要确保每次只选择一个div.anotacao进行克隆;否则你最终会得到指数增长的克隆数量!哎呀,忘了removeClass()处理了这个!

答案 2 :(得分:1)

尝试附加

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

答案 3 :(得分:0)

您需要使用appendTo指定您希望的位置。