При создании нового элемента списка запасов материализация не открывается, но элементы начального состояния работают

Question

Это мой первый пост о переполнении стека. Рад быть частью сообщества!

Я создаю проект Stock Market App. Я столкнулся с интересной проблемой. Я использую Materialise в своем проекте свыше Bootstrap. Я кодирую в React. У меня есть 2 акции в моем первоначальном состоянии, Apple и FaceBook. Всякий раз, когда я нажимаю на них, открывается модальное окно с дополнительной информацией о каждом. Но всякий раз, когда я добавляю новую акцию (например, JPM), элемент появляется, но всякий раз, когда я нажимаю, он не открывается.

При материализации вы инициализируете модал с jquery, как показано ниже в (index. * * тысяча двадцать-одиной). Затем вы делаете соответствие href и ID для каждого элемента, как я. Я проверил новый лайк, созданный для JPMorgan, и он говорит, что href = "# JPM" и id = "JPM", как и другие, которые работают. Единственное, о чем я могу думать, это то, что, возможно, всякий раз, когда jquery инициализируется, что, когда я добавляю элемент, он также как-то не инициализируется? Но я не уверен в этом, потому что это всего лишь простая строка кода:

$ ('. Modal'). Modal ();

Def довольно тупо здесь. Github хранилище находится ниже. Я также выложу несколько скриншотов из моего файла StockItem. js. https://github.com/Christopher-Bowling/Stock-Market-App

Изображения: Индекс. html StockItem. js

Answer 1

Вам нужно запускать инициализацию компонента каждый раз, когда вы создаете новый элемент, который нужно инициализировать.

Когда вы запускаете $ ('. Modal'). Modal (), jQuery ищет любой элемент в dom и запускает на нем функцию .modal () - один раз. Любые динамически добавленные элементы (добавленные после запуска этого начального) будут вести себя так, как будто вы вообще никогда не запускали init. Это затронуто на странице выбора do c:

Инициализация

Кроме того, вам потребуется отдельный вызов для любых динамически генерируемых элементов выбора Ваша страница генерируется. Вы должны инициализировать элемент select, как показано ниже.

https://materializecss.com/select.html