页面元素用JS动态添加的有效事件绑定方式（on）

最新推荐文章于 2025-06-08 03:54:18 发布

mrhaoxiaojun

最新推荐文章于 2025-06-08 03:54:18 发布

阅读量2.3k

点赞数

分类专栏： JavaScript Jquery 文章标签： on

JavaScript 同时被 2 个专栏收录

70 篇文章

订阅专栏

Jquery

19 篇文章

订阅专栏

本文介绍两种使用jQuery进行事件绑定的方法：直接对目标元素绑定事件及通过父容器代理子元素事件。前者适用于静态页面，后者则适合动态添加的元素，确保新加入的元素也能响应事件。

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

常规事件绑定方式，直接监听匹配元素事件

<div id="test1">
    <input type="button" class="btn" value="按钮1"/>
    <input type="button" class="btn" value="按钮1"/>
    <input type="button" class="btn" value="按钮1"/>
    <p></p>
</div>
<input type="button" class="add" value="加一个按钮" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="application/javascript">
    $(function(){
        $('.btn').on('click',function(){
            alert('绑定有效1')
        });
        $('.add').on('click',function(){
            $('#test1').append('<input type="button" class="btn" value="按钮2"/>')
        });
    })
</script>

通过监听父级容器下匹配子元素进行事件绑定

<div id="test1">
    <input type="button" class="btn" value="按钮1"/>
    <input type="button" class="btn" value="按钮1"/>
    <input type="button" class="btn" value="按钮1"/>
    <p></p>
</div>
<input type="button" class="add" value="加一个按钮" />

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="application/javascript">
    $(function(){
        $('#test1').on('click','.btn',function(){
            alert('绑定有效1')
        });
        $('.add').on('click',function(){
            $('#test1').append('<input type="button" class="btn" value="按钮2"/>')
        });
    })
</script>