2013-07-18 6 views
10

У меня есть 3 кнопки b1, b2, b3. Как связать нажмите на 3 кнопки. Var b1 = $ ("# b1"); Var b2 = $ ("# b2");jquery привязка события клика к нескольким кнопкам

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

jsfiddle.net/Xqpaq/

+0

Ваш код неверен, вы не можете используйте селектор jQuery для разделенных запятыми jQuery. Если вы хотите сделать это, используйте нотацию массива, например: $ ([b1, b2]) – Kevin

+0

Я хочу использовать только объекты var ... selectors должны быть только типа var – user321963

+0

Вы также можете просто указать: var b1 = "b1", b2 = "b2"; а затем используйте $ (b1, b2) .bind() ... – Kevin

ответ

6

Предоставление JQuery массив будет сочетать в себе каждый элемент в больший объект JQuery, таким образом, вы можете связать ваши события в одном кадре.

Предположим, что b1 и b2 - элемент DOM, а не объект jQuery.

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

JSFiddler в http://jsfiddle.net/XF3Vv/1/.

+0

Может ли кто-нибудь опубликовать скрипку? Я не могу заставить его работать, но кажется, что это классно – user1234

+0

не работает. Http://jsfiddle.net/arunpjohny/ehgMa/3/ –

+1

Добавлена ​​ссылка на скрипку – user321963

13

вы можете использовать .add()

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

Демо: Fiddle

или использовать multiple selector

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

Демо: Fiddle

8

завернуть их в 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> 

в ЯШ:

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

JS Fiddle of the above

10

Я настоятельно рекомендую сделать функцию кнопки мыши на отдельную функцию, а затем связать каждую кнопку к нему

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

в вашем случае:

просто сделать, как это показано ниже:

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

надеюсь, что это помогает кто-нибудь :)

Смежные вопросы