Question

我有一个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

Answer 1

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

看起来问题是您已经初始化了要克隆的textarea。相反，您需要将模板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();

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

1 个答案: