Come aggiungere eventi click per nome classe?

Question

Ho un menu di esempio 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> 

Posso aggiungere evento click per ogni elemento del menu nome della classe?

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

Answer 1

Suggerirei di utilizzare la funzione live, invece di .click, perché anche gli elementi aggiunti in fase di esecuzione saranno cliccabili.

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

Answer 2

È possibile trovare l'ID con this.id

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

Ma se il codice è completamente diverso per ogni pulsante, allora non può essere utile usare in quel modo, ma invece associa un gestore diverso per ogni id.

Answer 3

Sì. È possibile associare un gestore di eventi click a qualsiasi set di elementi DOM, indipendentemente dal fatto che siano selezionati per classe o altro. La sintassi nell'esempio è corretta e il gestore di eventi sarà associato a ciascun elemento corrispondente dal selettore.

Tuttavia, tenere presente che nell'esempio id non sarà definito. Dovresti utilizzare this.id, poiché this farà riferimento all'elemento su cui è stato fatto clic.

Answer 4

Se ho capito bene la tua domanda, provare a utilizzare questo:

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

Btw: In questo caso, un switch .. case sarebbe molto più appropriato!

Answer 5

ottimizzare il codice per non usarelive() come non possiamo fermare la propagazione di live() eventi

Usa on() (jQuery 1.7+) o delegate() (sotto 1.7)

Most soluzione efficiente per il tuo scenario in questo caso sarebbe:

// $('.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 
     } 
    }); 

In questo modo, si ha un solo clic evento legato al div principale $('.mmenu'), che funziona anche se si aggiungono elementi (nuovo li con div) in futuro