缺少样式的附加元素

Question

我正在尝试将动态追加与 JavaScript 一起使用，但追加的结果显示时没有主样式。我已经尝试就其他问题做一些建议，但没有一个产生显着的结果，有什么建议吗？

对我的问题没有帮助的链接：

Applying styles from CSS to newly appended elements

Appending Child resets previous appended element value on JavaScript

Append Style to DOM not Replacing Existing

appending html with jquery but don't get style

我有什么：

$(document).ready(function() {
  var max_fields = 4;
  var wrapper = $(".separator");
  var add_button = $(".btn-x");

  var x = 0;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
<div class='tabbable paper-shadow relative' data-z='0.5' id='div'>
  <div class='tab-content'>
    <div id='course' class='tab-pane active'>
      <div class='form-group'>
        <textarea name='info${x}' id='info${x}' cols='30' rows='10' class='summernote'></textarea>
      </div>
      <div class='text-center'>
        <button type='button' class='delete'>-</button>
      </div>
    </div>
  </div>
</div>`);
      //  add input box
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent().parent().parent().parent().remove();
    x--;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabbable paper-shadow relative" data-z="0.5">

  <!-- Panes2 -->
  <div class="tab-content">

    <div id="course" class="tab-pane active">
      <div class="form-group">
        <label for="info">Conteúdo</label>
        <textarea name="info" id="info" cols="30" rows="10" class="summernote"></textarea>
      </div>
      <div class="text-center">
        <button type="button" class="btn-x">+</button>
      </div>
    </div>

  </div>
  <!-- // END Panes2 -->

</div>

提前致谢：D

Answer 1

感谢@Barmar 的帮助！

我通过首先附加链接到我试图附加的元素的 .js 文件解决了这个问题。

修改后的代码：

$(document).ready(function() {
       var max_fields      = 4;
       var wrapper         = $(".separator");
       var add_button      = $(".btn-x");

       var x = 0;
       $(add_button).click(function(e){
           e.preventDefault();
           if(x < max_fields){
               x++;

               var myfunc1 = document.createElement("script");
               myfunc1.type = "text/javascript";
               myfun1.src = "js/myfunctions1.js";
               $("head").append(myfunc1);
               var myfun2 = document.createElement("script");
               myfun2.type = "text/javascript";
               myfun2.src = "js/myfunctions2.js";
               $("head").append(myfunc2);

               wrapper.append(`<div class='tabbable paper-shadow relative' data-z='0.5' id='div'>
                                      <div class='tab-content'>
                                        <div id='course' class='tab-pane active'>
                                            <div class='form-group'>
                                              <textarea name='info${x}' id='info${x}' cols='30' rows='10' class='summernote'></textarea>
                                            </div>
                                            <div class='text-center'>
                                                <button type='button' class='delete'>-</button>
                                            </div>
                                        </div>
                                      </div>
                                    </div>`); //add input box
           } else {
                alert('You Reached the limits')
                }
       });

       wrapper.on("click",".delete", function(e){
           e.preventDefault(); 
           $(this).parent().parent().parent().parent().remove();
           x--;
       })
});

据我了解，我需要这样做，因为该页面只加载该自定义文本区域的功能一次。我认为问题与 CSS 样式无关，而是与那些未为附加元素加载的函数有关。