如何處理Material Design Light中的事件mdl-menu

Question

我正在使用沒有任何其他框架（如Angular或Android）的Material Design Light。只是普通的舊PHP，Jquery，MDL min css和js。 簡單的菜單

<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> 

菜單項點擊運行，必須像setLanguage(language)

js函數如何創建用於監聽器 「MDL-menu__item」 點擊？我應該每li使用Jquery .click(function())，還是使用mdl-menu像select元素的任何其他方式？

Answer 1

使用jquery的click事件並將其與類綁定。同時爲你的li元素定義一個ID，這樣你就可以知道哪個元素被點擊了。看看下面的例子

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

爲了證明我創建了一個jsfiddle