jQuery .html（）打破Summernote

Question

我正在構建一個使用Bootstrap模塊的系統，它從隱藏的Div中提取內容並將其添加到引導模式中的模態體類。

問題是，當我通過.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>

正如你所看到的，在工具欄只是打破，並且不與互動文本。我嘗試過很多東西，但它似乎死了。

我在Modals網站上的多個textareas上也使用了summernote。

任何幫助將不勝感激。

Answer 1

當您將HTML複製到.modal-body只複製HTML時，需要使用Summernote的JavaScript事件。我想是你更好的複印後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