Question

我正在动态创建并向DOM添加以下内容：

<a href="my_modal_link" data-toggle="modal">Click me</a>

但是，由于在加载页面后动态添加此内容，因此永远不会注册Bootstrap模式，单击该链接会将浏览器导航到新页面，而不是将其显示为模式对话框。

如何让Bootstrap了解这个动态添加的模态标记，以便在单击链接时以模态显示内容？或者，我是否必须手动连接click事件以调用.modal（）？

Answer 1

当您动态创建链接时，您必须使用事件处理程序，如下所示

<强> HTML

<a href="#my_modal1" class="modal_links" data-toggle="modal">Click me # 1</a>
<a href="#my_modal2" class="modal_links" data-toggle="modal">Click me # 2</a>
<a href="#my_modal3" class="modal_links" data-toggle="modal">Click me # 3</a>
....
<a href="#my_modalN" class="modal_links" data-toggle="modal">Click me # N</a>

<强> JS

jQuery(function($){
    $("body").on("click",".modal_links",function(ev){
        ev.preventDefault();
        var modalToOpen = $(this).attr("href");
        $(modalToOpen).modal('show'); // also you can use "toggle" instead of "show"
    });
});

Answer 2

<a href="#my_modal_link" data-toggle="modal">Click me</a>

href =“＃....”不是href =“....”

在动态添加的数据切换元素上触发Bootstrap模式

2 个答案: