Добавленный элемент с отсутствующими стилями - PullRequest
Новая
       8

Добавленный элемент с отсутствующими стилями

0 голосов
/ 27 мая 2018

Я пытаюсь использовать динамическое добавление с JavaScript, но добавленный результат получается без основного стиля.Я пытался выполнить некоторые рекомендации по другим вопросам, но ни один из них не дал значительного результата, какие-либо предложения?

Ссылки, которые не помогли моей проблеме:

Применение стилей из CSSк новым добавленным элементам

Присоединяющийся дочерний элемент сбрасывает предыдущее значение добавленного элемента в JavaScript

Добавление стиля в DOM без замены существующих

добавление html с помощью jquery, но без стиля

Что у меня есть: 

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

1 Ответ

0 голосов
/ 05 июня 2018

Спасибо @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, а в тех функциях, которые не загружались для добавленных элементов.

...