使用 jQuery 克隆时，Summernote 工具栏不起作用答案

【问题标题】：Summernote toolbar doesn't work when cloned with jQuery使用 jQuery 克隆时，Summernote 工具栏不起作用
【发布时间】：2016-04-19 05:15:03
【问题描述】：

我有一个 html 模板，我用它来动态创建带有 summernote 的表单字段。一旦将克隆的模板添加到表单中，该工具似乎无法正常工作？谁能建议我缺少什么以及是否有其他解决方法？

我的 JS 代码如下

$(document).ready(function () {


        bookIndex = 0;

        $('.addButton').click(function() {
            bookIndex++;
            var template = $('#bookTemplate'),
                clone    = template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id');
             $('#bookForm').append(clone)                   ;

        });

        $('textarea').summernote();


    });

html 是：

 <form id="bookForm" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-1 control-label">Book</label>
            <div class="col-xs-4">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>

        </div>
        </form>
    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
     <div class="form-group" id="bookTemplate">
            <div class="col-xs-4 col-xs-offset-1">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>
      </div>

完整代码和相应的输出如下： http://jsbin.com/jogema/edit?html,js,output

【问题讨论】：

我也遇到了同样的问题。你找到解决办法了吗？

标签： jquery summernote jquery-clone

【解决方案1】：

我知道这已经晚了，但希望它会对其他人有所帮助。

看起来问题在于您已经初始化了要克隆的文本区域。相反，您需要将模板 HTML 复制到您的代码中，然后初始化 Summernote。

这是你的 jsbin 中的工作 js：

$(function() {

  $("#add_field_button").click(function (e) {
      var newProd = $('#prod_form_template')
              .clone()
              .removeClass('hide')
              .removeAttr('id')
              .appendTo('#prod_list');
       $('#prod_list').append(newProd);
       $(newProd).summernote();

  });

  $('#prod_list textarea').summernote();

});

和jsbin：

http://jsbin.com/xevenisacu/1/edit?html,js,output

更新

如果你确实需要克隆一个初始化的summernote编辑器，你也可以这样做，但你需要先销毁并删除标记：

// first get rid of the summernote editor

$('#container').find('.summernote').summernote('destroy');

// next remove the extra code created by summernote

$('#container').find('.note-editor').remove();

// finally, remove the summernote element itself

$('#container').find('.summernote').remove();

// clone the template

$('#container').append($('.template.summernote').clone());

// initialize summernote

$('#container').find('.summernote').summernote();

【讨论】：