1.问题描述
页面有一个表格,初始有n行数据,每行有一个操作按钮(设置了click事件)。点击筛选按钮,发送ajax请求获得新的数据,将数据渲染到同一个表格,问题出现:每行的操作按钮失效,在浏览器开发者模式发现事件消失,而初始表格数据的按钮是有事件的。
2.问题原因:我用JQ选择器绑定事件的元素在ajax刷新页面之后消失,ajax从服务器加载的新数据我没有添加事件。
3.解决:
思路:用js的事件冒泡,将事件绑定在ajax局部刷新不会改变的标签上,当事件冒泡至目标元素再触发事件。
<tbody>//我的ajax局部刷新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
}
});
补充:也可以在ajax刷新页面的时候重新添加事件。