JQuery：动态添加标签绑定事件

梁云亮

已于 2022-01-21 10:03:45 修改

阅读量3.1k

点赞数 4

分类专栏： # TypeScript/JavaScript/JQuery 文章标签：动态添加标签绑定事件

于 2020-05-06 04:09:21 首次发布

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/105942821

版权

TypeScript/JavaScript/JQuery 专栏收录该内容

73 篇文章 4 订阅

订阅专栏

说明

采用JQuery技术先获取页面元素，然后再在后面追加元素的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。

之所以这样原因是因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到。

动态添加的标签要事件委托才能获取到节点，具体解决办法：

通过on绑定事件（注意使用on绑定事件时，hover无效，因为on的参数只能传一个函数）
live绑定：
delegate绑定：

语法：
$(selector1).on(events,[selector2],[data],fn)

参数	描述
events	一个或多个用空格分隔的事件类型和可选的命名空间
selector2	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理
fn	该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false

注意：

selector1 为动态添加节点的父级节点，请使用非动态添加的父级节点，不然同样获取不到。
请委托给直接上级非动态添加节点，不要扩大范围，否则可能会造成一次点击多次执行情况！

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="sth1"><button id="btn1">btn1</button></div>
        <div id="sth2"></div>
        <div id="sth3"></div>

        <script src="jquery/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $("#btn1").click(function () {//能正常触发事件
                alert("btn 111");
            });
            $(function () {
                $("#sth2").append('<button id="btn2">btn2</button>');
                $("#sth3").append('<button id="btn3">btn3</button>');
            });

            $("#btn2").click(function () {//不能正常触发事件
                alert("btn 222");
            });
            $("#sth3").on("click","#btn3",function () {//能正常触发事件
                alert("btn 333");
            });
        </script>
    </body>
</html>

梁云亮

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery：动态添加标签绑定事件

说明采用JQuery技术先获取页面元素，然后再在后面追加元素的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。之所以这样原因是因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到。动态添加的标签要事件委托才能获取到节点，具体解决办法：通过on绑定事件（注意使用on绑定事件时，hover无效，因为on的参数只能传一个函数）li...
复制链接

扫一扫