Bootstrap 4 модальные не отображаются с данными цели

Question

Я возвращаю объект Json из локального API, он работает нормально, с объектом, которым я наполняю свою таблицу строками и столбцами, в каждом столбце есть кнопка поиска, которая должна открыть модальное окно с более подробной информацией об этой строке,который уже был загружен с таблицей.

Вот пример моей кнопки выглядит так:

        <tr>
    ...
            <td><button type="button" class="btn btn-primary form-control"
         id="id5bb3b60d870f3809e8e4403d" data-toggle="modal" 
data-target="#5bb3b60d870f3809e8e4403dmodal">+</button></td>
            </tr>

А вот модальный пример:

<div id="5bb3b60d870f3809e8e4403dmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="5bb3b60d870f3809e8e4403dLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="5bb3b60d870f3809e8e4403dLabel">whatever</h5>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

КакВы можете видеть, что моя цель данных и идентификатор div совпадают, я также пытался удалить aria-labelledby и aria-hidden, если я использую инспектор браузера, я вижу, что модал уже загружен.Я также могу успешно использовать getElementById, используя мой модальный идентификатор.Мне жаль, что это ошибка нуба, но я уже потратил впустую целый день, пытаясь ее решить.Я не получаю ни исключений, ни ошибок, ни какого-либо представления о модале.

Answer 1

@ Дэвид Лян был прав, так как я загружаю свою таблицу динамически, она не работает.

Чтобы решить ее с помощью делегирования JQuery, мне просто нужно было:

$("#rastreioTable tbody").on('click', 'button', function (event) {
    $("#" + this.id + "modal").modal();
});

Где«rastreioTable» был моим идентификатором таблицы, а «tbody» был элементом, где были загружены строки.Насколько я мог понять, проблема в том, что когда мы добавляем новый элемент или изменяем элемент html, вы нарушаете обработчики событий, которые были загружены изначально.

Если бы это было решено с помощью vanilla JS, прослушиватель событийрешите это, как показано ниже:

document.getElementById("rastreioTable").addEventListener('click', function (e) {
if (e.target.type == "button") {
        $("#" + e.target.id + "modal").modal();
}
}, false);

Здесь мне также нужно добавить if, чтобы проверить, является ли нажатой элемент кнопкой, потому что событие будет вызвано, если пользователь щелкнет где-нибудь вТаблица.