JS中innerHTML动态绑定的事件丢失_innerhtml 控件没有事件了_ohmorning的博客

问题出现的原因：

问题就出在innerHTML上，因为重写了body里面button，这就相当于创建了另外一个dom对象，之前渲染的dom跟这个新的dom对象没有关系，所以就导致了事件的丢失。
如何解决：

用appendchild()来代替innerHTML
<button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        var newDiv = document.createElement('div');
        var newDivTxt = document.createTextNode('新元素');
        newDiv.appendChild(newDivTxt);
        body.appendChild(newDiv);
        btn.onclick = function () {
            alert('hello');
    </script>
这样只是添加新的内容而没有重写，自然就不会出现上面的问题了。 
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        body.innerHTML += "<div class='newDiv'>新元素</div>";
        body.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'button') {
                alert('我又可以点击啦!')
    </script>
</body>
给body事件绑定。通过body委托事件给button。 
使用jquery中的on方法 
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        body.innerHTML += "<div class='newDiv'>新元素</div>";
        $('#btn').on('click', function () {
            alert('hello');
    </script>
</body>
                    JS中innerHTML动态绑定的事件丢失问题概述：父元素使用innerHTML在原有的内容下插入新的内容，会导致原来的子元素绑定的事件无效，具体代码如下：&lt;body&gt;    &lt;button id="btn"&gt;点我&lt;/button&gt;    &lt;script&gt;        var body = document.body;        ...
				用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如: html:  代码如下: <body><div id=’d1′>点击</div></body>  script:  代码如下: document.getElementById(‘d1’).onclick=function(){alert(1)}; var html=document.body[removed]; document.body[removed]=html;  这段代码执行后点击d1是没有任何反应的。 解决方法： 把onclick绑定到父元素，利用冒泡原理，判断当前元素是否为d1,若
				js事innerHTML事件丢失
----欢迎查看我的博客----
  老前端人以前很容易遇到这种问题。渲染服务器端的数据，包装成自己的HTML，使用innerHTML或者.html（），异步的把它渲染上去。这时候会发现子元素写的一些事件不生效。
  例如我们想在body中追加一个div,仔细看下面这个代码，您就会发现我在说什么了。
&lt;body&gt;
	&lt;button i...
				最近搞的一个项目中所使用的方式比较奇怪，用Label显示HTML内容，然后不断地使用JS把Label的innerHTML复制到TextBox中。
但是，昨天发现了一个问题，获取元素值的时候，有时候正常，有时候不正常，然后进入了漫长的DEBUG。。
调试过程中，监测Label和TextBox的值，发现获取到Label的值是未被改变的，控件加载的时候是怎样就怎样，在页面中是以SPAN元素...
                    weixin_41948230: 
                    啊啊啊啊啊气死我了 这样也不显示,最后发现,由于想要精益求精,按需引入引得echar 我根本就没有引入 legend^ 所以不显示.  不过 我也是动态赋值 所以第二个问题改了也是对的
// 引入legend组件
require("echarts/lib/component/legend");
                echarts legend不显示
                    weixin_41948230: 
                    感谢!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!我是情况2