jQuery .html（）breaks Summernote

Question

私は、ブートストラップモーダルを使用するシステムを構築しています。隠された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>

あなたが見ることができるように、ツールバーがちょうど壊れると相互作用しませんテキスト私は複数のことを試みましたが、それはちょうど死ぬようです。

私はモーダルの中のウェブサイトの周りの複数のテキストエリアでsummernoteを使用しています。

ご協力いただければ幸いです。

Answer 1

.modal-bodyにHTMLをコピーすると、HTMLだけをコピーすると、SummernoteのJavaScriptイベントが必要になります。

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