动态添加的按钮不显示引导模式

Question

我有一个模态窗口

<div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" 
                            aria-labelledby="Modal" aria-hidden="true">
... content
</div>

基本 html 中的按钮正确显示模态窗口：

<button class="btn btn-default btn-flat btn-xs comment-edit" type="button" data-toggle="modal"
                data-target="#comment-modal">
          <i class="fa fa-edit" title='edit'></i>
</button>

但是动态添加的相同按钮（通过 ajax 调用）仅显示淡入淡出页面并且不显示任何对话框。但随后我在 Chrome 中检查代码，模态窗口看起来已显示。

 <div class="modal fade in" id="comment-modal" tabindex="-1" role="dialog" 
           aria-labelledby="Modal" aria-hidden="false" style="display: block;">
    ... content
    </div>

如果先点击非动态添加的按钮，然后点击动态添加的按钮，那么模态会正确显示。

Answer 1

button 不起作用。从你的代码来看：

您正在打开一个button 标记并用I tag 关闭它。事情是这样运作的吗？我不这么认为。
那么你没有针对任何东西。模态按钮有一个data-target 元素指向modal-div 的id。所以给你的模态 div 和 id 并使用 data-target 到其他按钮指向它。

在您的按钮中：title attribute 没有结束标记。也许这会解决你的大部分问题。

<button class="btn btn-default btn-flat btn-xs comment-edit" type="button" 
   data-toggle="modal" class="fa fa-edit" title="edit" data-target="#ModalDiv">
     Button Name
</button>



<div class="modal fade in" id="comment-modal" tabindex="-1" role="dialog" 
       aria-labelledby="Modal" aria-hidden="false" style="display: block;" id="ModalDiv">
... content
</div>