Question

我有3个按钮b1，b2，b3。如何绑定点击3个按钮。 Var b1 = $（“＃b1”）; Var b2 = $（“＃b2”）;

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

jsfiddle.net/Xqpaq /

Answer 1

您可以使用.add()

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

演示：Fiddle

或使用multiple selector

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

演示：Fiddle

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 of the above

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;
    }
});

希望它有助于某人：）

jquery将click事件绑定到多个按钮

5 个答案: