Material Design Lightでイベントを処理する方法mdl-menu

Question

私はMaterial Design LightをAngularやandroidのような他のフレームワークなしで使用しています。ちょうど平凡な古い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> 

メニュー項目をクリックして、私はをクリックし、 "MDL-menu__item" のリスナーを作成するにはどうすればよいsetLanguage(language)

のようなjsの機能を実行する必要がありますか？ liごとにJquery .click(function())を使用するか、mdl-menuをselect要素のように使用する他の方法はありますか？

Answer 1

jqueryのクリックイベントを使用し、それをクラスにバインドします。また、どの要素がクリックされたかを知るために、li要素にIDを定義します。私はちょうどあなたが得るためにクリックハンドラに追加パラメータを宣言することができることを追加したい - 私が示したようにクリックをキャッチすると、実際に動作しないjsfiddle