jQuery .html() breaks Summernote

I'm building a system that uses Bootstrap modals, it pulls the content from a hidden Div and adds it to the modal-body class within the bootstrap modal.

The issue is, when I load it via .html() it kills the toolbar on the Summernote editor, however, the shortcuts work.

JSFiddle

Here's some of the code:

Code

	$(".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').summernote({
	  toolbar: [
	    // [groupName, [list of button]]
	    ['style', ['bold', 'italic', 'underline', 'clear']],
	    ['font', ['strikethrough', 'superscript', 'subscript']],
	    ['para', ['ul', 'ol', ]]
	  ]
	});

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

As you can see, the toolbar just breaks and doesn't interact with the text. I've tried multiple things but it just seems to die.

I'm using the summernote on multiple textareas around the website within Modals too.

Any help would be greatly appreciated.

Solution

When you copy the HTML to .modal-body you copy just the HTML, you need the JavaScript events of Summernote. I think is better you dispaches Summernote events after the copy, like this:

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