记录问题：文档加载完毕添加的元素、ajax局部刷新页面的元素，js事件失效

1.问题描述

页面有一个表格，初始有n行数据，每行有一个操作按钮（设置了click事件）。点击筛选按钮，发送ajax请求获得新的数据，将数据渲染到同一个表格，问题出现：每行的操作按钮失效，在浏览器开发者模式发现事件消失，而初始表格数据的按钮是有事件的。

2.问题原因：我用JQ选择器绑定事件的元素在ajax刷新页面之后消失，ajax从服务器加载的新数据我没有添加事件。

3.解决：

思路：用js的事件冒泡，将事件绑定在ajax局部刷新不会改变的标签上，当事件冒泡至目标元素再触发事件。

<tbody>//我的ajax局部刷新tbody内的页面
    <tr>
        <td>
            <button id="#btn">1</button>//原来绑定事件的元素
        </td>
    </tr>
</tbody>    <tr>
        <td>
            <button id="#btn">1</button>//原来绑定事件的元素
        </td>
    </tr>
</tbody>

带背景颜色的为动态加载部分（ajax），开始我将事件直接绑定到button，出现上述问题。

之后，将事件绑定到tbody上，js代码改为：

$("#tbody").on('click',function(event){
    if(event.target.nodeName=="BUTTON"){//当事件冒泡到button节点触发
        //dosomething
    }
});当事件冒泡到button节点触发
        //dosomething
    }
});

补充：也可以在ajax刷新页面的时候重新添加事件。

或者使用事件委托：

$(document).on('click','.znh',function(){
    //todo.
});

对document对象的类为znh的元素添加事件，这样即便是document加载完成后添加的类为znh的元素也会绑定该事件。