缺少样式的附加元素

Question

I'm trying to use the dynamic append with JavaScript, but the appended result is displayed without the main style. I have tried to do some things advised on other questions, but none has generated a significant result, any suggestions?

Links that did not help my problem:

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

What I have:

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

Thanks in advance :D

Answer 1

Thanks to @Barmar for the help!

I solved the problem by first appending the .js files that were linked to the elements I was trying to append.

Edited code:

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

As far as I understand I needed to do this because the page only loads the functions for that custom textarea once. I think the problem was not related to CSS styles but to those functions that did not load for the appended elements.