Tengo 3 botones dentro de un div y quiero agregar el mismo detector de clics a todos ellos. Tengo algunas acciones en esos botones, así que primero los mantengo como variables al comienzo de la función y luego quiero agregar el oyente, usando esas variables. ¿Hay alguna manera? El HTML se ve así:
<div class="wrapper"> <button class="a"></button> <button class="b"></button> <button class="c"></button> </div>El JS:
var $wrapper = $('.wrapper'), $aBtn = $wrapper.find('.a'), $bBtn = $wrapper.find('.b'), $cBtn = $wrapper.find('.c'); //The working but less neat solution $('.wrapper .a, .wrapper .b, .wrapper .c').on('click', func); //What I want ($aBtn, $bBtn, $cBtn).on('click', func);Puede usar .add() // Enlace de referencia
var $wrapper = $('.wrapper'), $aBtn = $wrapper.find('.a'), $bBtn = $wrapper.find('.b'), $cBtn = $wrapper.find('.c'); //What I want $($aBtn).add($bBtn).add($cBtn).on('click', func); function func(){alert($(this).attr("class"))} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <button class="a">a</button> <button class="b">b</button> <button class="c">c</button> </div>Usando la función de agregar
$aBtn.add($bBtn,$cBtn).on('click', func);El siguiente código no usa variables, pero a veces puede simplemente vincular eventos en selectores que envuelven múltiples elementos
$('.wrapper button').on('click', func);Con este código, cada botón tiene un controlador de eventos adjunto. Cuando hace clic en un elemento, hace referencia al elemento como se muestra en este jsfiddle: https://jsfiddle.net/3uwx15vg/1/
Como alternativa a las variables, incluso puede encadenar controladores de eventos
$('.wrapper button').on('click', func).on('blur', func);