Comment append un événement de clic par nom de classe?

J’ai un exemple de menu html:

 

Puis-je append un événement de clic pour chaque élément de menu par nom de classe?

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

Je suggérerais d’utiliser la fonction live au lieu de .click, car les éléments ajoutés au moment de l’exécution seront également cliquables.

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

Optimisez votre code en n’utilisant pas live() car nous ne pouvons pas arrêter la propagation d’événements live()

Utiliser on() (jQuery 1.7+) ou delegate() (inférieur à 1.7)

La solution la plus efficace pour votre scénario dans ce cas serait:

 // $('.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 cette façon, vous n’avez qu’un seul événement de clic lié au div principal $('.mmenu') , qui fonctionnera également si vous ajoutez des éléments (new li with divs) à l’avenir.

Vous pouvez trouver l’identifiant avec this.id

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

Mais si le code est complètement différent pour chaque bouton, il peut ne pas être utile de l’utiliser comme ça, mais plutôt de lier un gestionnaire différent par identifiant.

Oui. Vous pouvez lier un gestionnaire d’événements click à n’importe quel ensemble d’éléments DOM, qu’ils soient sélectionnés par classe ou autre. La syntaxe de votre exemple est correcte et le gestionnaire d’événements sera lié à chaque élément associé au sélecteur.

Cependant, gardez à l’esprit que dans votre exemple, l’ id sera indéfini. Vous devrez utiliser this.id , car this fera référence à l’élément sur lequel vous avez cliqué.

Si je comprends bien votre question, essayez ceci:

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

Btw: Dans ce cas, un switch .. case serait beaucoup plus approprié!