Динамически добавлять Materialise модальный с помощью JavaScript

Question

На странице шаблона у меня есть изображение и поле ввода.Изображение представляет собой головоломку.Если пользователь отправляет неправильный ответ , я хочу показать пользователю модальное сообщение.Таким образом, модальное будет загружаться, только если пользователь отправляет неправильный ответ.

изображение

html

<!-- show modal -->
        <div id="error" style="margin-top: 120px">
            <div id='modal1' class='modal modal-fixed-footer'></div>
        </div>

        <img class="materialboxed" width="480" height="200" src="{{ img_url }}" style="margin-top: 50px">
        <form class="" id="puzzle_form" name="puzzle_form" method="post" style="margin-left: 20px; margin-top: 10px">
            {% csrf_token %}
            <div class="row">
                <div class="input-field">
                    <i class="material-icons prefix">sentiment_very_satisfied</i>
                    <input id="answer" name="answer" type="text" class="validate" required>
                    <label for="answer">Your answer here...</label>
                </div>
            </div>
            <div class="row">
                <button id="submit_button" class="btn waves-effect waves-light" type="submit" style="margin-left: 90px">
                    Submit
                    <i class="material-icons right">send</i>
                </button>
            </div>
        </form>

js

let _html = "<!-- Modal Structure -->";
_html += "<div class='modal-content'>";
_html += "<h4>Modal Header</h4>";
_html += "<p>A bunch of text</p>";
_html += "</div>";
_html += "<div class='modal-footer'>";
_html += "<a href='#!' class='modal-close waves-effect waves-green btn-flat'>Agree</a>";
_html += "</div>";

$('#error').ready(function () {
    $('.modal').append(_html);
    $('.modal').modal();
});

Но когда пользователь отправляет неправильный ответ, модальное изображение не отображается на странице HTML.(Хотя он загружен. Я вижу его из элемента Inspect.)

Answer 1

Не могли бы вы предоставить ссылку codepen / JSfiddle?Если вы говорите, что HTML-код был добавлен на страницу, и вы можете увидеть его, выполнив элемент inspect.Таким образом, исходя из этого, есть две возможности:

1. Если вы используете плагин для этого модального режима, он может быть не запущен.
2. Существует некоторая проблема с CSS.

Пожалуйста, поделитесь ссылкой или CSS-кодом , чтобы я мог проверить, где это не так. Потому что, если он был добавлен, с конца HTML проблем нет.Только при запуске модального или с CSS.Надеюсь это поможет!

Answer 2

Что я сделал, так это то, что в ответе на ошибку в Ajax я написал этот фрагмент кода.

$('#error').ready(function () {
    $('.modal').append(_html);

    let _modal = document.querySelector('.modal');
    let instance = M.Modal.init(_modal);
    instance.open();
});

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

Answer 3

Вы пытались добавить class="modal-trigger" в кнопку submit?