Cómo agregar un evento de clic por nombre de clase?

Question

que tienen un menú de ejemplo html:

<div class="mmenu"> 
    <ul> 
     <li> 
      <div class="menu_button" id="m1" >A</div> 
     </li> 
     <li> 
      <div class="menu_button" id="m2" >B</div> 
     </li> 
     <li> 
      <div class="menu_button" id="m3" >C</div> 
    </ul> 
</div> 

¿Puedo añadir evento de clic para cada elemento del menú por nombre de la clase?

$('.menu_button').click(function() { 
    if (id == "m1") .... 
}) 

Answer 1

Sugeriría usar la función en vivo, en lugar de .click, porque también se podrá hacer clic en los elementos agregados en el tiempo de ejecución.

$('.menu_button').live('click', function() { 
    var id = $(this).attr('id'); 
    if (id == "m1") { 
     //do your stuff here 
    } 
}); 

Answer 2

Puede encontrar la identificación con this.id

$('.menu_button').click(function() { 
    if (this.id == "m1") .... 
}) 

Pero si el código es completamente diferente para cada botón, entonces no puede ser útil para usarlo así, pero en vez enlaza un controlador diferente para cada carné de identidad.

Answer 3

Sí. Puede vincular un controlador de eventos click a cualquier conjunto de elementos DOM, ya sea que estén seleccionados por clase o por cualquier otra cosa. La sintaxis en su ejemplo es correcta y el controlador de eventos se vinculará con cada elemento que coincida con el selector.

Sin embargo, tenga en cuenta que en su ejemplo id no estará definido. Debería usar this.id, ya que this se referirá al elemento que se ha hecho clic.

Answer 4

Si entiendo bien su pregunta, trate de usar esto:

$('.menu_button').click(function() { 
    if ($(this).attr('id') == "m1") .... 
}) 

Por cierto: En este caso, un switch .. case sería mucho más apropiado!

Answer 5

optimizar el código de no usarlive() ya que no podemos detener la propagación de live() eventos

Uso on() (jQuery 1.7+) o delegate() (por debajo de 1,7)

mayoría Una solución eficiente para su escenario en este caso sería:

// $('.mmenu').on("click", ".menu_button", function() { // jQuery 1.7 & up 
    $('.mmenu').delegate(".menu_button", "click", function() { 
     var id = $(this).attr('id') // or this.id 
     if (id == "m1") { 
      // ..code 
     } 
    }); 

De esta manera, usted tiene único evento de clic ligado a la div principal $('.mmenu'), que también funcionan si se añaden elementos (nueva li con divs) en un futuro