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--;
       })
});

据我所知，我需要这样做，因为页面只加载一次自定义textarea的函数。我认为问题与CSS样式无关，而是与那些没有为附加元素加载的函数有关。

缺少样式的附加元素

1 个答案: