jQuery .html() ломает Summernote

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

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

JSFiddle

Вот часть кода:

Код

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

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

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

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


html jquery summernote
person Matt    schedule 24.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы копируете HTML в .modal-body, вы копируете только HTML, вам нужны события JavaScript из Summernote. Я думаю, что лучше, если вы отправляете события 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-скрипт

person Charles Cavalcante    schedule 24.04.2016
comment
@MattyClarke, если этот ответ решил вашу проблему, примите его. - person Paul; 24.04.2016