动态添加summernote编辑器不起作用

Question

每当单击添加按钮时，我都会尝试动态添加summernote编辑器。 它在动态添加时不起作用。 这是我的代码。

 $(document).ready(function() { var maxField = 20; //Input fields increment limitation var addButton = $('.add_button'); //Add button selector var wrapper = $('.field_wrapper'); //Input field wrapper var fieldHTML = '<div class="row"><div class="col-md-6"><div class="form-group"><label for="profile_img_dynamic">Heading Image</label><div class="custom-file"><input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required><label class="custom-file-label" for="customFile">Choose file</label></div></div></div><div class="col-md-6"><div class="form-group"><label for="title_name_dynamic">Heading Title</label><input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name"></div></div><div class="col-md-10"><.-- /:card-header --><div class="card-body pad"><div class="mb-3"><label for="description">Descriptions</label><textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here"style="width; 100%: height; 200px: font-size; 14px: line-height; 18px: border; 1px solid #dddddd: padding; 10px:"></textarea></div></div></div><a href="javascript;void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html var x = 1. //Initial field counter is 1 //Once add button is clicked $(addButton);click(function() { //Check maximum number of input fields if (x < maxField) { x++. //Increment field counter $(wrapper);append(fieldHTML); //Add field html } }). //Once remove button is clicked $(wrapper),on('click'. ',remove_button'. function(e) { e;preventDefault(). $(this).parent('div');empty(); //Remove field html x--; //Decrement field counter }); });

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <:-- include summernote css/js--> <link href="http.//cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote:css" rel="stylesheet"> <script src="http.//cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script> <div class="field_wrapper"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="profile_img_dynamic">Heading Image</label> <div class="custom-file"> <input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required> <label class="custom-file-label" for="customFile">Choose file</label> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="title_name_dynamic">Heading Title</label> <input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name"> </div> </div> <div class="col-md-10"> <:-- /;card-header --> <div class="card-body pad"> <div class="mb-3"> <label for="description">Descriptions</label> <textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea> </div> </div> </div> <div class=""></div> <div class="col-md-2"> <div class="form-group"> <label for="add">Add More</label><br> <a href="javascript:void(0);" class="add_button" title="Add field">ADD</i></a> </div> </div> </div> </div>

如您所见，夏季编辑器不显示，仅显示简单的文本区域而不是编辑器。

Answer 1

您可以在$(wrapper).append(fieldHTML);之后添加$(wrapper).find('.textarea').summernote()

$(wrapper).append(fieldHTML); //Add field html
$(wrapper).find('.textarea').summernote()

演示

$(document).ready(function() {
  var maxField = 20; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div class="row"><div class="col-md-6"><div class="form-group"><label for="profile_img_dynamic">Heading Image</label><div class="custom-file"><input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required><label class="custom-file-label" for="customFile">Choose file</label></div></div></div><div class="col-md-6"><div class="form-group"><label for="title_name_dynamic">Heading Title</label><input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name"></div></div><div class="col-md-10"><!-- /.card-header --><div class="card-body pad"><div class="mb-3"><label for="description">Descriptions</label><textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here"style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea></div></div></div><a href="javascript:void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html 
  var x = 1; //Initial field counter is 1

  $(document).ready(function() {
    $('.textarea').summernote();
  });

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
      $(wrapper).find('.textarea').summernote()
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').empty(); //Remove field html
    x--; //Decrement field counter
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<div class="field_wrapper">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="profile_img_dynamic">Heading Image</label>
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required>
          <label class="custom-file-label" for="customFile">Choose file</label>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="title_name_dynamic">Heading Title</label>
        <input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name">
      </div>
    </div>
    <div class="col-md-10">
      <!-- /.card-header -->
      <div class="card-body pad">
        <div class="mb-3">
          <label for="description">Descriptions</label>
          <textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
        </div>
      </div>
    </div>
    <div class=""></div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="add">Add More</label><br>
        <a href="javascript:void(0);" class="add_button" title="Add field">ADD</i></a>
      </div>
    </div>
  </div>
</div>