jQuery .html() bricht ab Summernote

Question

Ich baue ein System, das Bootstrap-Modale verwendet, zieht den Inhalt aus einem versteckten Div und fügt es der Modal-Body-Klasse innerhalb des Bootstrap-Modals hinzu.

Das Problem ist, wenn ich es über .html() lädt es die Symbolleiste auf dem Summernote Editor, jedoch die Verknüpfungen funktioniert.

JSFiddle

Hier ist ein Teil des Codes:

-Code

\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>

Wie Sie sehen können, die Symbolleiste bricht einfach und tritt nicht in Wechselwirkung mit der Text. Ich habe mehrere Dinge ausprobiert, aber es scheint einfach zu sterben.

Ich benutze den Summernote auf mehreren Textareas um die Website in Modals auch.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Wenn Sie den HTML-Code in .modal-body kopieren, kopieren Sie nur den HTML-Code, Sie benötigen die JavaScript-Ereignisse von Summernote. Ich denke, besser Sie Summernote Ereignisse nach dem Kopie dispaches, wie folgt aus:

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