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

最新推荐文章于 2021-08-06 13:54:44 发布

Zhunh_

最新推荐文章于 2021-08-06 13:54:44 发布

阅读量995

点赞数

CC 4.0 BY-SA版权

分类专栏：项目日记文章标签： JS ajax

本文链接：https://blog.youkuaiyun.com/qq_22656233/article/details/79490154

项目日记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种常见的前端问题：使用Ajax动态加载数据后，原有通过JQuery绑定的按钮事件失效的情况，并提供了两种解决方案：一是利用事件冒泡原理绑定事件到不变的父级元素上；二是使用事件委托。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的元素也会绑定该事件。