Невозможно использовать перо-иконки для элементов div, созданных в файлах JS - PullRequest
Новая
       1

Невозможно использовать перо-иконки для элементов div, созданных в файлах JS

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

Я использую иконки из перьев в ванильном проекте js. Когда я объявляю скрипт feather.replace() внутри тела html, значки отображаются правильно. Тем не менее, я создаю определенный div динамически в JS. Значки внутри этих элементов не отображаются. 

<!DOCTYPE html>
<html>
 <head>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 </head>
 <body>
    <div class="wrapper>
    </div>

    <script>
      feather.replace()
    </script>
    <script src="./js/script.js"></script>
 </body>
</html>

Моя js функция: 

let newInputWrapper = document.getElementById("wrapper");
  newInputWrapper.innerHTML += `
    <div class="input-wrapper">
        <div class="input-box">
            <input type="text" class="input">
            <div class="input-icon font-color" id="${newAddID}" onClick="onAddNewCategory(this.id)">
                <i data-feather="plus"></i>
            </div>
            <div class="input-icon font-color" id="${newdeleteID}" onClick="onRemoveNewCategory(this.id)">
                <i data-feather="trash"></i>
            </div>
            <div class="input-icon font-color">
                <i data-feather="chevron-right"></i>
            </div>
        </div>
    </div>
   `

1 Ответ

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

Вам нужно вызвать feather.replace() в конце тела, чтобы проанализировать любой динамически добавленный элемент. 

<!DOCTYPE html>
<html>
 <head>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 </head>
 <body>
    <div class="wrapper>
    </div>

    <script src="./js/script.js"></script>
    <script>
      feather.replace()
    </script>
 </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...