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() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。