проблема добавления элементов динамически с materializecss - PullRequest
Новая
       54

проблема добавления элементов динамически с materializecss

0 голосов
/ 31 января 2020

Я совсем новичок, используя javascript, и у меня проблема с добавлением элементов динамически из функции js.

Я использую node.js + express + e js + materialize CSS и у меня есть частичное представление с картой, если я включаю этот файл в визуализированный e js, все работает нормально, но если добавить те же самые элементы динамически, метка в текстовых вводах перекрывается.

Когда я добавляю карточку с частичным представлением, используя «include», это происходит так же, но почти сразу текстовые вводы refre sh, и метки в порядке. Поэтому я предполагаю, что что-то происходит после загрузки DOM.

Для тестирования я вызвал функцию, которая создает карту до полного рендеринга файла, и она тоже работала нормально, она не работает, если я вызываю ту же функцию после полной загрузки DOM.

Я проверил do c для ввода текста на сайте Materialise CSS, но для этого нет инициализации.

именно так я включаю первые карты в e js (open_text.e js) и второй, использующий функцию js до полной загрузки DOM (оба работают нормально) 

<div id="content">
   <%- include('../partials/cards/create/open_text') %>  
   <script type="text/javascript">create_card('text');</script>
</div>

- так я добавляю ту же карту, но с помощью кнопки ( это точно такой же контент, что и файл e js, использованный выше) 

function create_card(type){
    let text_card = "";
    text_card+=     '<div class="row">'
    text_card+=         '<div class="col s6 offset-s3"> <span class="flow-text"></span>'
    text_card+=             '<div class="card white-text darken-1">'
    text_card+=                 '<div class="card-content black-text">'
    text_card+=                     '<form class="container">'
    text_card+=                         '<div class="row">'
    text_card+=                             '<div class="input-field row s12" style="margin-bottom: 30px;">'
    text_card+=                                 '<i class="material-icons prefix">comment</i>'
    text_card+=                                 '<input placeholder="Please type the question Title" id="question_title" type="text" class="validate" required data-length="40">'
    text_card+=                                 '<label for="question_title">Question Title</label>'
    text_card+=                             '</div>'
    text_card+=                             '<div class="input-field row s12" style="padding-bottom: 10px;">'
    text_card+=                                 '<i class="small material-icons prefix">format_color_text</i>'
    text_card+=                                 '<input value="500 characters limit" id="text_area" type="text" disabled>'
    text_card+=                                 '<label for="text_area">Open Text Area</label>'
    text_card+=                             '</div>'
    text_card+=                             '<div class="switch" id="switch1">'
    text_card+=                                 '<label> Mandatory <input type="checkbox"> <span class="lever"></span></label>'
    text_card+=                                 '<a class="btn-floating waves-effect waves-light red tooltipped" id="btn_delete_card" data-position = "bottom" data-delay = "50" data-tooltip = "delete card" style="margin-left: 20px;">'
    text_card+=                                 '<i class="material-icons">delete</i></a>'
    text_card+=                             '</div>'
    text_card+=                         '</div>'
    text_card+=                     '</form>'
    text_card+=                 '</div>'
    text_card+=             '</div>'
    text_card+=         '</div>'
    text_card+=     '</div>';

    document.getElementById("content").innerHTML +=  text_card;

}

на этом рисунке вы можете видеть, что первые две карты в порядке, но последняя добавлена ​​с кнопки, использующей функция, метки перекрывают текст ниже

Любая помощь будет оценена!

Заранее спасибо.

1 Ответ

0 голосов
/ 04 февраля 2020

после добавления «class = active» в ярлыки работал нормально

...