Bootstrap模式不会从带有AJAX调用创建的内容的模态显示

Question

我正在开发一个Web应用程序，通过单击图标打开一个显示用户联系人的Bootstrap模式。此模式中的数据是从AJAX调用创建的。动态数据包含一个锚标记，单击时应打开第二个模式，允许用户编辑联系信息。第一个模态中的标记如下所示：

    <a href="#" class="text-gray edit-contact" data-toggle="modal" data-target="#edit-contact">Edit</a></div><div class="clearfix"></div></div>';     

该页面包含一个id =“edit-contact”

的对话框模式

单击此链接在动态生成时不执行任何操作，但如果在页面中对其进行了硬编码，则第二个模式将按预期打开。此外，点击等事件不会对动态生成的内容起作用。

从同一页面，我可以从AJAX数据中打开一个模态，但打开模态的链接是在页面上而不是在另一个模态上，所以看起来Bootstrap模式有动态内容的问题 - 有没有人遇到过这个问题？ -Thanks！

Answer 1

你需要在你的ajax成功中调用模态的开头：

$.ajax("myUrl").success(function(data)
{
  $('#edit-contact').append(data).modal('show');
});

---

<div id="edit-contact" class="modal fade" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"></div>

Answer 2

我认为您应该使用delegate或其他工具，例如on。我更喜欢代表。您必须为该元素提供第二个命令，以便可以单击它。像：

$(selector).delegate(this,"click",function(){
     //Do something as you wish
});

有关更多文档，请参阅此delegate链接。