脚本只执行一次，使用async bootstrap模式

Question

我有一个模式，如下所示，使用jQuery jQuery.ajax（）方法异步加载其内容。

<script>alert('test!')</script>
    <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

为什么当我第一次触发模态，且仅时，会出现警告对话框？如果我再试一次，没有重新加载页面，我就不再有警告对话框......

HTML代码

步骤尝试

我试图在异步模式中添加一些基本的Steps，但它只在第一次工作...（就像任何其他js代码一样......）

javascript代码

这里触发模态调用的按钮：

<button class="btn btn-primary btn-xs" onclick="modalCall('Details')">Details</button>

并且异步调用：

在阅读doc：

之前的第一次尝试

function modalCall(url)
{
   $('.modal-content').load(url);
}

第二个用$ .get ...没有成功

$.get( url, function( data ) {
    $('.modal-content').html( data );
    alert( "Load was performed." );
  });

此处每次按下按钮时都会执行警报（＆＃34;已执行加载。＆＃34;）; ，但不会执行模式内的代码...

我在控制台里什么都没得到......

Answer 1

经过几个小时的调试，我终于找到了原因......

1. 我使用了模板，并且我复制了modal-content类...（一次在异步模式中，一次在着陆页上），导致嵌套modal-content;
2. 我使用了多个div（每个都用它自己的id唯一标识）作为模态容器（一个是异步模式，就像我在一些样本中看到的那样），奇怪的是，导致在每个容器中加载一个模态...尽管每对{{1 } / data-target是对的...

清理所有这些东西解决了我的问题...