Javascript 引导模式不'；重置HTML正文后无法关闭

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

步骤1:加载弹出窗口后，单击printModal。（很好）。 步骤2:关闭浏览器打印对话框（工作正常，打印对话框关闭，引导模式仍然可见）。 步骤3:单击关闭模式（失败，模式未关闭）

如果在单击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>

//更多html
$（'#myModal'）。在（'click'，'input#printButton'，函数（）{
var myCopy=document.body.innerHTML；
var printThis=document.getElementById（“modalContent”）.innerHTML；
document.body.innerHTML=printThis；
window.print（）；
document.body.innerHTML=myCopy；
});

---

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

document.body.innerHTML = printThis;

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

单击事件也消失了

您可以做的是更改打印的css，以便只显示模式内容

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

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

请注意，弹出窗口不利于用户过期，因此您应该首先尝试css修改aproach。
尝试将
输入更改为
按钮，如图所示

所以看起来是这样的：

<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>


关
是有意义的，是否仍然可以在不重新加载页面的情况下重新绑定javascript函数？您可以使用jQuery的
detach
分离body的子元素，然后附加模式内容，然后重新附加内容。但同样地，仅仅向body添加一个css类并调整样式将不太容易出错，而且更容易出错，因为JS和DOM绑定被破坏了，这将不起作用。