Appended element with missing styles

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

Why do you do $(wrapper)? You've already stored the element inside the variable wrapper, so there's no need to re-init jQuery on that element. It's already a jQuery object. A lot of people just name the variable $wrapper to make it clear it's a jQuery object. -- Anyway, are you sure you're putting the content into the right box and it doesn't have nested stylings? Also sure that the elements aren't within an iframe? Also, make sure the stylings aren't on the ID's. Oh, and, get rid of that ID in your appending HTML. You are **NOT** allowed to have multiple same-name ID's on a single page. — NoobishPro, May 26 '18 at 21:27
if styles aren't displaying correctly it is either a missing class, incomplete structure or your css is wrong. No way for us to assess problem without a [mcve] — charlietfl, May 26 '18 at 21:29
There's no `class="separator"` in your HTML, so `$(wrapper).append()` doesn't do anything. — Barmar, May 26 '18 at 21:31
Also when chaining `parent.parent.parent` better for readability, debugging and for any later structure changes to use `closest('.parentClassName')` — charlietfl, May 26 '18 at 21:31
@NoobishPro Sorry for that, I'm very new to JS, thanks for this tips. I tested without the appended method and worked fine, so I think is in the right box, I'm also not using iframe in this page and the styles are linked only to the classes. Gonna remove this ids too. — leonardofmed, May 26 '18 at 23:34
@Barmar main style is my .css that holds the classes from the divs that I mentioned in the example. The .separator is defined and end after the example HTML code so the appended elements will be just bellow. The code is working fine, just the styles that does not load. — leonardofmed, May 26 '18 at 23:34
@charlietfl I don't posted the .css file because is too big and I don't think that is gonna change something since is working fine without the append method. Thank you for that tip too, I will change that! — leonardofmed, May 26 '18 at 23:34
How are we supposed to answer this when you don't show the relevant HTML and CSS? — Barmar, May 27 '18 at 13:49
@Barmar Sorry for that, as I said earlier the files are very large and I thought that the CSS code would not interfere since the process without the append method worked, but I will edit the example including those files. The HTML file is basically the same, what changes is a div above that posted as an example, which is the .separator. — leonardofmed, May 28 '18 at 01:08
We don't need to see everything, just enough to demonstrate the problem. — Barmar, May 29 '18 at 14:33
The problem is probably that you're not nesting things properly, but without seeing the HTML and CSS we can't tell. — Barmar, May 29 '18 at 14:34
@Barmar Added the full HTML code and the CSS files used in page. I don't think its a nesting problem because the page works fine if I manually add what I'm trying to append with Javascript. But if you known what is wrong with my code I will be very appreciate. — leonardofmed, Jun 01 '18 at 22:18
You didn't add the CSS files. Anyway, the way to debug this is by using Developer Tools. Go to the Elements tab, select an element whose style is wrong. In the Styles section it will show which styles apply to that element and what's overriding other styles. — Barmar, Jun 04 '18 at 16:10
@Barmar Hey man, thanks for the answer! The CSS files used in this page is basically the ones in the section "CSS Files used in page: 1, 2 and 3." after the Edit tag. I already tried this too, sadly the two styles are exactly the same, nothing changes :/ But on the page the attached section appears as there is no style, even with all of them appearing normally in the Styles tab — leonardofmed, Jun 04 '18 at 16:54
There's way too much stuff there to try and figure out what's going on. If you can't condense this into a [mcve] (with emphasis on **Minimal**), this question will never be answered. — Barmar, Jun 04 '18 at 17:01
@Barmar Thank you for your patience, I solved the problem while doing a simple version for the problem as you asked. The problem was that the divs and textarea I was trying to append has some js elements in it, so I solved append this js files again in the head section before the divs and textarea. — leonardofmed, Jun 04 '18 at 22:34

leonardofmed · Accepted Answer · 2018-06-05T12:23:41.270

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.

You should show the changes you made to your code. It's not clear from this answer what you actually did. — Barmar, Jun 04 '18 at 23:44
You should also explain how this fixed it. It seems implausible to me. CSS doesn't care when it's added to the document, it just applies to whatever is in the DOM. — Barmar, Jun 04 '18 at 23:44
I tried to improve the answer, thank you again. If anything is still missing, let me know. — leonardofmed, Jun 05 '18 at 12:24

Appended element with missing styles

1 Answers1