Comment gérer les événements dans Material Design Light mdl-menu

Question

J'utilise Material Design Light sans aucun autre cadre comme Angular ou Android. Tout simplement vieux PHP, Jquery, MDL min css et js. Menu simple

<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> 
    <i class="material-icons">language</i> 
</button> 
<ul id="lang-switcher-items" class="mdl-menu mdl-js-menu mdl-menu--top-left" for="lang-switcher"> 
    <li class="mdl-menu__item">EN English</li> 
    <li class="mdl-menu__item">RU Русский</li> 
    <li class="mdl-menu__item">UK Українська</li> 
    <li class="mdl-menu__item">PL Polski</li>   
</ul> 

élément de menu, cliquez sur doit exécuter js fonction comme setLanguage(language)

Comment puis-je créer écouteur pour "mdl-menu__item" clic? Dois-je utiliser Jquery .click(function()) pour chaque li, ou est-ce qu'il y a d'autres façons d'utiliser mdl-menu comme élément select?

Answer 1

Utilisez l'événement click de jquery et liez-le à la classe. Définissez également un ID pour vos éléments li afin que vous puissiez savoir quel élément a été cliqué. regardez l'exemple suivant

$(".mdl-menu__item").click(function(){ 
    var id = $(this).attr("id"); 
    alert(id+"was clicked"); 
}) 

Pour i démontrer avoir créé un jsfiddle