时间戳

首页 > 解决方案 > Bootstrap 4 模态不会出现在数据目标中

html - Bootstrap 4 模态不会出现在数据目标中

问题描述

我正在从本地 API 返回一个 Json 对象，它工作正常，我用行和列为我的表提供对象，每列都有一个搜索按钮，它应该打开一个模式，其中包含有关该行的更详细信息，这已经装满了桌子。

这是我的按钮示例：

        <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 id 匹配，我还尝试删除 aria-labelledby 和 aria-hidden，如果我使用浏览器检查器，我可以看到模式已经加载。我还可以使用我的模态 ID 成功使用 getElementById。很抱歉，这是一个菜鸟错误，但我已经浪费了一整天的时间来解决它。我没有得到任何异常，也没有错误，也没有任何模态视图。

标签： htmlbootstrap-4

解决方案

@David Liang 是对的，因为我正在动态加载我的表格，所以它不起作用。

要使用 JQuery 委托解决它，我只需要：

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

其中“rastreioTable”是我的表 ID，“tbody”是加载行的元素。据我所知，问题是当我们添加新项目或修改 html 元素时，您破坏了最初加载的事件处理程序。

如果要使用 vanilla JS 来解决，事件监听器会解决它，类似于下面的代码：

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

在这里，我还需要添加一个 if 来检查按下的项目是否是一个按钮，因为如果用户单击表格中的任何位置，就会触发该事件。

推荐阅读