js調用頁面打印功能后，由于替換了body.innerHTML,再點擊就不能再打印了，如下圖和代碼

問題

1.點擊打印前，我要上下拉伸這個textarea的高度，
2.拉伸后，點擊打印，如果取消，則返回到頁面，并保持我拉伸后的textarea高度，現在取消后，不能再點擊打印，調出打印預覽了
3.不用sessionlocatorep,cookie這些
3.頁面不管刷不刷新，實現效果就好，我下面的刷新是為了可以后續(xù)可以再點擊

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            margin-top: 50px;
            border: 1px solid #ff0000;
            resize: vertical;
        }
    </style>
</head>

<body>
    <button id="btn2">點擊打印</button>
    <br>
    <textarea id="box">我只要打印這個框</textarea>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script>
        var oldContent = document.body.innerHTML;
        var newContent = document.getElementById("box").innerHTML;
        $("#btn2").click(function() {
            document.body.innerHTML = newContent;
            window.print();
            // window.location.reload(); 頁面刷新
            document.body.innerHTML = oldContent;

        })
    </script>
</body>

</html>

vue

<template>  
    <div> 
    <br>
    <button id="btn2" @click="aa">點擊打印</button>
    <br>
    <textarea id="box">我只要打印這個框</textarea>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            aa() {
                this.printFn()
            },
            printFn() {
                var oldContent = document.body.innerHTML;
                document.body.innerHTML = document.getElementById("box").innerHTML;
                window.print();
                document.body.innerHTML = oldContent;
            }
        }
    }
</script>

回答

編輯回答

痞性

因為重新調用innerHTML相當于覆蓋了之前的DOM結構，所以之前綁定事件的那個DOM就沒有了。
推薦可以了解一下事件代理，將click綁定在body上，判斷當前觸發(fā)元素是否為button即可。

2017年4月5日 16:30

編輯回答

尐飯團

按鈕點擊后document.body.innerHTML = newContent;
dom發(fā)身變化這時候按鈕綁定的點擊事件已經沒有了
document.body.innerHTML = oldContent;這個是不會重新綁定按鈕事件所以按鈕失效了
所以把按鈕寫上onclick

<button id="btn2" onclick="printbox();">點擊打印</button>

事件內寫成方法

function printbox(){
  var oldContent = document.body.innerHTML;
  document.body.innerHTML = document.getElementById("box").innerHTML;
  window.print();
  document.body.innerHTML = oldContent;
}

2017年9月7日 15:19