缺少樣式的附加元素

Question

我正在嘗試將動態附加與 JavaScript 一起使用，但顯示的附加結果沒有主樣式。 我已經嘗試在其他問題上做一些建議，但沒有產生顯着的結果，有什么建議嗎？

對我的問題沒有幫助的鏈接：

將樣式從 CSS 應用到新添加的元素

Appending Child 會在 JavaScript 上重置之前追加的元素值

將樣式附加到 DOM 不替換現有的

用jquery附加html但沒有樣式

我擁有的：

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

提前致謝

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 樣式無關，而是與那些未為附加元素加載的函數有關。