jQuery .html() breaks Summernote

Question

Я строю систему, которая использует модальность Bootstrap, она вытаскивает содержимое из скрытого Div и добавляет его в класс модального тела в модуле bootstrap.

Проблема, когда я загружаю ее через .html(), она убивает панель инструментов в редакторе Summernote, однако работают ярлыки.

JSFiddle

Вот некоторые из кода:

Код

\t $(".home-options a").click(function() { 
 
\t var _modal = $('#homeOptionModal'); 
 
\t var _this = $(this); 
 
\t var _header = _this.find("h1").text(); 
 
\t var _tcontent = _this.find(".option-content").html(); 
 
\t _modal.modal('show'); 
 
\t _modal.find(".modal-title").html(_header); 
 
\t _modal.find(".modal-body").html(_tcontent); 
 
\t }); 
 
\t $('.summernote').summernote({ 
 
\t toolbar: [ 
 
\t  // [groupName, [list of button]] 
 
\t  ['style', ['bold', 'italic', 'underline', 'clear']], 
 
\t  ['font', ['strikethrough', 'superscript', 'subscript']], 
 
\t  ['para', ['ul', 'ol', ]] 
 
\t ] 
 
\t });

.modal-dialog { 
 
    margin: 80px auto; 
 
} 
 
.modal-content { 
 
    border: 5px solid #2A9CFF; 
 
    border-radius: 0px; 
 
} 
 
.option-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script> 
 
<div class="row home-options"> 
 
    <div class="modal fade" id="homeOptionModal" tabindex="-1" role="dialog" aria-labelledby="homeOptionModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title" id="homeOptionModalLabel"></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a href="#" class="col-xs-12 col-sm-6"> 
 
    <div class="option-square"> 
 
     <h1>Click me</h1> 
 
     <div class="option-content"> 
 
     <div class="form-group"> 
 
      <input type="text" placeholder="Full Name" class="form-control" id="fullname" value="" /> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="text" placeholder="What's your current job?" class="form-control" id="job" value="" /> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="text" placeholder="What city are you in?" class="form-control" id="location" value="" /> 
 

 
     </div> 
 
     <div class="form-group"> 
 
      <textarea class="summernote" placeholder="Tell us a little more about yourself. What makes you tick?" id="bio">Content goes here</textarea> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Как вы можете видеть, панель просто разрывает и не взаимодействует с текст. Я пробовал несколько вещей, но он просто умирает.

Я использую summernote на нескольких текстовых облаках вокруг веб-сайта в Modals тоже.

Любая помощь была бы принята с благодарностью.

Answer 1

При копировании HTML на .modal-body вы копируете только HTML, вам нужны события JavaScript Summernote. Я думаю, лучше вы dispaches события Summernote после копирования, как это:

$(".home-options a").click(function() { 
    var _modal = $('#homeOptionModal'); 
    var _this = $(this); 
    var _header = _this.find("h1").text(); 
    var _tcontent = _this.find(".option-content").html(); 
    _modal.modal('show'); 
    _modal.find(".modal-title").html(_header); 
    _modal.find(".modal-body").html(_tcontent); 

    $('.summernote', _modal).summernote({ 
     toolbar: [ 
     // [groupName, [list of button]] 
     ['style', ['bold', 'italic', 'underline', 'clear']], 
     ['font', ['strikethrough', 'superscript', 'subscript']], 
     ['para', ['ul', 'ol',]] 
     ] 
    }); 
}); 

JS Fiddle