关于使用Jquery的appen动态添加元素的事件绑定

最新推荐文章于 2022-09-20 20:52:15 发布

Win_Man

最新推荐文章于 2022-09-20 20:52:15 发布

阅读量675

点赞数

CC 4.0 BY-SA版权

分类专栏：杂项文章标签： jquery 函数

本文链接：https://blog.youkuaiyun.com/Win_Man/article/details/52072598

杂项专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用jQuery正确地为动态添加的元素绑定事件监听器。通过示例演示了传统方法的局限性，并展示了使用事件委托的方式实现动态元素事件绑定的方法。

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

在用jquery对页面元素进行操作的时候，经常会用到appen（）函数来对页面元素进行添加，有时候还需要对新添加的元素绑定新的事件，但是如果像普通绑定事件函数一样对新添加的元素进行事件绑定的话，会失败，事件监听不起作用。

<div id="button-test">
    <button id="add-button" class="btn btn-primary">增加按钮</button>
</div>
<script>
    TestData={}
    TestUtil = {
        init:function(){
            $('#add-button').on('click',function () {
                TestUtil.addButtonFunc();
            })
            $('.select').on('click',function () {
               alert('clicked');
            });
        },
        addButtonFunc:function () {
            var innerHtml = '<button class="select btn btn-primary">点击按钮</button>';
            $('#button-test').append(innerHtml);
        }
    }

    $(function(){
        TestUtil.init();
    })
</script>

这个时候需要使用新的方式来进行事件绑定。

<div id="button-test">
    <button id="add-button" class="btn btn-primary">增加按钮</button>
</div>
<script>
    TestData={}
    TestUtil = {
        init:function(){
            $('#add-button').on('click',function () {
                TestUtil.addButtonFunc();
            })
            $('#button-test').on('click','.select',function () {
                alert('success clicked');
            })
        },
        addButtonFunc:function () {
            var innerHtml = '<button class="select btn btn-primary">点击按钮</button>';
            $('#button-test').append(innerHtml);
        }
    }

    $(function(){
        TestUtil.init();
    })
</script>

$('#button-test').on('click','.select',function () {
       alert('success clicked');
})

中，$('#button-test')是一直存在的页面元素，click是要绑定的事件类型，'.select'是选择器，在'#button-test'的范围内进行选择，function是绑定的事件