jquery - jquery将点击事件绑定到多个按钮

Question

我有 3 个按钮 b1、b2、b3。如何绑定点击 3 个按钮。变量 b1 = $("#b1"); var b2 = $("#b2");

$(b1,b2).bind("click", function(){});

jsfiddle.net/Xqpaq/

Answer 1

你可以使用.add()

b1.add(b2).add(b3).click(function(){
})

演示：小提琴

或使用多个选择器

$('#b1, #b2, #b3').click(function(){
})

演示：小提琴

Answer 2

我强烈建议将按钮单击功能设为单独的功能，然后将每个按钮绑定到它

http://jsfiddle.net/Xqpaq/1/

$(document).ready(function(){ 

     var b1 = $("#btn1");
     var b2 = $("#btn2");
     var b3 = $("#btn3");

    var btnClick = function(e){
        alert("Button: "+e.currentTarget.id);
    }

    b1.on('click', btnClick);
    b2.on('click', btnClick);
    b3.on('click', btnClick);

});

另一种方法是使用classes而不是ids. 像这样：

http://jsfiddle.net/Xqpaq/2/

<input type="button" id="btn1" class="btn-click-action" value="submit"/>
<input type="button" id="btn2" class="btn-click-action" value="submit2"/>
<input type="button" id="btn3" class="btn-click-action" value="submit3"/>

然后JS：

var btnClassClick = function(e){
    alert("Button clicked from class: "+e.currentTarget.id);
}

$('.btn-click-action').on('click', btnClassClick);

Answer 3

将它们包装在一个 div 中，然后将所有按钮元素的 div 定位。

<div id="button-nav">
    <button class="button" type="button">button 1</button>
    <button class="button" type="button">button 2</button>
    <button class="button" type="button">button 3</button>
</div>

js：

$('#button-nav').on('click','button', function (evt) {
   //-- do stuff
});

上面的 JS Fiddle

Answer 4

给 jQuery 一个数组会将每个项目组合成一个更大的 jQuery 对象，因此您可以一次性绑定您的事件。

假设 b1 和 b2 是 DOM 元素，而不是 jQuery 对象。

$([b1, b2]).click(function (evt) { 
     // your code goes here 
});

JSFiddler 在http://jsfiddle.net/XF3Vv/1/。

Answer 5

在你的情况下：

只需在下面这样做：

cj('#b1, #b2').click(function(){

        alert('you clicked either button 1 or button 2');

});

典型例子：对不同的元素做这样的事情，如果你点击这些元素中的任何一个，就会触发这个点击事件

cj('#_qf_Contact_upload_view-top, #_qf_Contact_upload_new-top, ,#_qf_Contact_upload_view-bottom, #_qf_Contact_upload_new-bottom').click(function(){
    console.log(cj('#first_name').val());
    if(cj('#first_name').val() == '' || cj('#first_name').val().length == 0)
     {
        alert('First Name is a required field, cannot be empty');
        return false;
    }
});

希望它对某人有帮助:)