Question

我正在从本地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。抱歉，这是一个菜鸟错误，但是我已经浪费了一整天试图解决它。我没有例外，也没有错误，也没有关于模态的任何看法。

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

Bootstrap 4模式不与数据目标一起出现

1 个答案: