替换HTML后Bootstrap模式不会切换

问题描述

关于CodePen的简单示例：https://codepen.io/xanabobana/pen/oNxwgzX

工作流程为：

点击+添加新闻文章-弹出新闻模式
单击“上载新图像-新闻模式”已关闭，保存了其中的HTML，并打开了上载图像模式
使用底部的“关闭”按钮关闭“上载图片”模式-新闻模式会使用保存的HTML再次打开
尝试再次单击“上传新图像”，这次没有任何反应

我在做什么错了？

代码如下：

var newsModalHTML = $("#newsModalDiv").html();

//replace news modal with image modal when adding a new image
    $("#newImageButton").click(function() {
        newsModalHTML = $("#newsModalDiv").html();
        $("#newsModal").modal('toggle');
        $("#newFileModal").modal('toggle');
    });
    
//show the news modal when the file modal is closed
    $("#closeUploadFile").click(function() {
        $("#newsModalDiv").html(newsModalHTML);
        $("#newsModal").modal('toggle');
        $('#fldNewTitle').focus();
    });

<button type="button" data-toggle="modal" data-target="#newsModal">+Add News Article</button>

<!--hidden edit article div-->
 <div id="newsModalDiv" style="max-height:90%; overflow:scroll;">
 <div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Edit News Article</h4>
      </div>
      <div class="modal-body">
<button type="button" id="newImageButton">Upload New Image</button>
      </div>
      <div class="modal-footer">
        <span style="float:right"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="newArticleSubmit">Save</button></span></div>
      </div>
    </div>
  </div>
</div>
</div>

<!--hidden upload image div-->
<div id="newFileModalDiv">
 <div class="modal fade" id="newFileModal" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Upload a New Image</h4>
      </div>
      <div class="modal-body">
        <section class="col-md-12">
            <article>
                <p>Use this form to upload an image to the database for the current project.</p><br>
              
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeUploadFile">Close</button>
        <button type="button" class="btn btn-primary" id="submitNewFile">Upload Image</button>
      </div>
    </div>
  </div>
</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jquery twitter-bootstrap