Панель инструментов Summernote не работает при клонировании с jQuery

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

Я знаю, что это поздно, но, надеюсь, это поможет кому-то другому.

Похоже, проблема в том, что вы уже инициализировали текстовое поле, которое вы клонируете. Вместо этого вам нужно скопировать шаблон HTML в ваш код и затем инициализировать summernote.

Вот рабочие JS с вашего jsbin:

$(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

UPDATE

Если вам действительно нужно клонировать инициализированную редактор 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();