Bootstrap 4 模态不会出现在数据目标中答案

【问题标题】：Bootstrap 4 modal don't appear with data-targetBootstrap 4 模态不会出现在数据目标中
【发布时间】：2019-03-13 12:57:38
【问题描述】：

我正在从本地 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。很抱歉，这是一个菜鸟错误，但我已经浪费了一整天的时间来解决它。我没有得到任何异常，也没有错误，也没有任何模态视图。

【问题讨论】：

您能否发布一个完整的示例来重现该问题？
确保你有一个模态所需的所有嵌套 div，例如。 modal-dialog、modal-content 等。之后，确保没有两个 div 具有相同的 id（这肯定会导致模态不显示）
这是因为您的表格内容是动态加载的。当您有按钮 click 事件的侦听器但按钮是动态加载和构建时，同样的问题。 click 事件不起作用，您必须改用 $.on('click')。

标签： html bootstrap-4

【解决方案1】：

@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 来检查按下的项目是否是一个按钮，因为如果用户单击表格中的任何位置，就会触发该事件。

【讨论】：