当前位置:首页 > 叨叨念念 > Jquery给多个相同class属性的元素添加单击事件

Jquery给多个相同class属性的元素添加单击事件

叨叨念念 / 星之宇 / 2022-1-8 14:07 / 浏览:2330 / 评论:0

Jquery给多个相同class属性的元素统一添加单击事件。


Html代码:

<input type="button" class="demoBtn" id="id1" value="按钮1" data-attr="a" />
<input type="button" class="demoBtn" id="id2" value="按钮2" data-attr="b" />
<input type="button" class="demoBtn" id="id3" value="按钮3" data-attr="c" />
<input type="button" class="demoBtn" id="id4" value="按钮4" data-attr="d" />


JS代码:

$(function(){
    $("body").on("click",".demoBtn",function(){
        console.log(this.id); //获取当前点击按钮的id
        console.log($(this).val()); //获取当前点击按钮的值
        console.log($(this).attr('data-attr')); //获取当前点击按钮的自定义属性的值
    })
})


on方法定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。语法是$(selector).on(event,childSelector,data,function)

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

目前有 0 条评论

    • 昵称
    • 邮箱
    • 网址