重置 HTML 正文后引导模式不会关闭答案

【问题标题】：Bootstrap modal doesn't close after resetting HTML body重置 HTML 正文后引导模式不会关闭
【发布时间】：2019-01-20 20:54:44
【问题描述】：

我的引导模式上有一个 printModal 和一个 closeModal 按钮。打印逻辑运行后模态不会关闭。

第 1 步： 加载弹出窗口后点击 printModal。（工作正常）。 第 2 步： 关闭浏览器打印对话框（工作正常，打印对话框关闭并且引导模式仍然可见）。 第 3 步： 点击 closeModal（失败，模式未关闭）。

如果我在单击 printModal 之前单击 closeModal，它可以正常工作。只有先执行 printModal 后才有效。

<div id="myModal" class="modal fade" role="dialog">
<div id="modalContent" class="modal-dialog modal-lg">
    <div class="modal-content">
    // more html


        <div class"buttons">
            <input type="submit" id="printButton" class="btn-lg" value="Print">
            <input type="submit" id="closeButton" class="btn-lg" data-dismiss="modal" value="Close">
        </div>
    </div>

    <script>
        $('#myModal').on('click', 'input#printButton', function () {

            var myCopy = document.body.innerHTML;
            var printThis = document.getElementById("modalContent").innerHTML;
            document.body.innerHTML = printThis;

            window.print();

            document.body.innerHTML = myCopy;

        });
    </script>
</div>

【问题讨论】：

标签： javascript jquery html bootstrap-4 bootstrap-modal

【解决方案1】：

这是因为您使用此代码更改了页面的整个 HTML 代码以及整个 DOM：

document.body.innerHTML = printThis;

绑定到 DOM 元素的 javascript 函数现在消失了，关闭按钮上的 click 事件也消失了。

您可以做的是更改用于打印的 css，以便仅显示模态内容。

或者，您可以打开一个弹出窗口，在其中添加模态内容，然后打印并关闭它。弹出窗口示例：

var printPopup = window.open('');
printPopup.document.write(printThis);
printPopup.document.write(/ add some css or include a css file/);
printPopup.print();

注意弹窗不利于用户体验，所以你应该先尝试css修改方法。

【讨论】：

有道理，有没有在不重新加载页面的情况下重新绑定javascript函数？
您可以使用 jQuery 的 detach api.jquery.com/detach 分离 body 的子元素，然后附加您的模态内容，然后重新附加这些内容。但是再次向 body 添加一个 css 类并调整样式会更不容易出错并且更容易

【解决方案2】：

尝试将您的input 更改为button，如图所示here。

所以它看起来像这样：

<div class"buttons">
   <input type="submit" id="printButton" class="btn-lg" value="Print">
   <button id="closeButton" class="btn-lg" data-dismiss="modal">Close</button>
</div>

【讨论】：

这将不起作用，因为 JS 和 DOM 绑定已损坏。