jQueryトリガーはフォーカスをクリックしますが、フォーカスをクリックするとクリックしません。

Question

私はMDLサイトで作業しています。 known issueが存在し、それでもデフォルトのselectフォーム要素を与えていません。私が見つけた解決策はmenu componentを使用することでした。これはinputがクリックされたときに表示されます。うまくいく。しかし、入力がTABキーを使用してフォーカスされているときにメニューが表示されないことに気付きました。だから私はjQueryのでこれを置く：

/* 
Make menus show up on input focus 
*/ 
$('.mdl-textfield__input').focus(function(){ 
    $(this).click(); 
}); 

をこれはTAB駆動フォーカスにメニューを表示するために適しています。しかし、問題は、今、私が入力をクリックすると、それは表示され、メニューを非表示にすることです。実際のクリックがそれを示し、私のコードからの次のシミュレートされたクリックはそれを閉じるでしょう。

フォーカス状態がクリックによって駆動されたかどうかを知ることができ、その上でjQueryコードを条件付けできるかどうかは疑問です。フォーカスがクリックから発生した場合、クリックをシミュレートする必要はありませんか？ここで

はMDL HTMLコードの例です：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.errors.gender %}is-invalid{% endif %}"> 
    <label class="mdl-textfield__label" for="gender">Gender</label> 
    <input class="mdl-textfield__input" id="id_gender" name="gender" type="text" readonly value="{{ form.gender.value }}" readonly> 
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect select-menu" for="id_gender"> 
     <li class="mdl-menu__item" data-val="m">Male</li> 
     <li class="mdl-menu__item" data-val="f">Female</li> 
     <li class="mdl-menu__item" data-val="t">Transgender</li> 
     <li class="mdl-menu__item" data-val="o">Other</li> 
    </ul> 
    <span class="mdl-textfield__error">{{ form.errors.gender.as_text }}</span> 
</div> 

Answer 1

$('body').on('focus', '.mdl-textfield__input', function(e){ 
    $(this).trigger('click') 
});