javascript - 第二次点击不加载 bootstrap 模态

Question

我正在使用 ajax 调用显示模态通知，ajax 和 php 代码很好，它只在第一次显示模态通知，第二次单击 anchor 时它不会加载 "modal-dialogue" div 和 "modal-content" 但它加载 "modal fade modal-form in" div。当我调试它时，我看到上面两个 div 都没有显示，我知道我可以用 javascript 处理它们，但我认为这不是解决方案。

我那里缺少什么，请指导

<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
  <i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button>
        <h3 class="modal-title" id="flagModalLabel">
          <?php echo esc_html__( 'Flag' ); ?>
        </h3>
      </div>
      <div class="modal-body">
        <form id="cs_flag_user">
          <input type="hidden" name="name_one">
          <input type="hidden" name="name_two">
          <textarea></textarea>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

看来您的服务器端可能有问题，页面中的代码或任何更改的表单提交都可能是 DOM，打开控制台并找出确切的问题会更容易。

您代码的完整演示正在 Codepen here 中运行.我只是用简单的文本替换了你的 php 代码，检查它并留下你的评论，以防你需要更多帮助。

如果您需要轻松地使用模态窗口，我已经编写并开源了基于 bootstrap4 的模态窗口包装器插件，您还可以找到 demos and how to use here .