アイコン付きJquery-ui選択メニュー - 選択しない

Question

アイコンを含むjquery-ui選択メニューを作成しましたが、クリックすると選択機能が呼び出されません。

クリックに反応するテキストを持つアイテムは正しく表示されます。

Thx！

$(function() { 
 
    $("#menu").menu({ 
 
    select: function(event, ui) { 
 
     alert('click'); 
 
    } 
 
    }); 
 
});

#menu li { 
 
    height: auto; 
 
    margin: 0; 
 
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<ul id="menu"> 
 
    <li>hello</li> 
 
    <li> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 /> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20> 
 
    </li> 
 
</ul>

はEDIT：

は、私はいくつかの理由でjqueryUIは、画像分割器クラスの代わりに、メニュー項目のクラスを与えていることがわかりました。

私はこの

$(function() { 
 
    $("#menu").menu({ 
 
    select: function(event, ui) { 
 
     alert('click'); 
 
    } 
 
    }); 
 
});

#menu li { 
 
    height: auto; 
 
    margin: 0; 
 
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<ul id="menu"> 
 
    <li>hello</li> 
 
    <li> 
 
    <div class="ui-menu-item"> 
 
     <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 /> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="ui-menu-item"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20> 
 
    </div> 
 
    </li> 
 
</ul>

のような余分なdiv要素を追加することで、私の問題を解決することができ、私はまだ良いソリューション/説明がjQuery UI Menu Widget documentationに基づいて

Answer 1

可能であると思います、それはすべての扱い項目をスペースまたはダッシュをメニューディバイダとしてリストする（hereを読む）。

あなたの場合は、画像以外のメニュー項目に何もないので、アイテムは仕切りとして扱われると思います。

しかし、ウィジェットは機能的なCSSクラスを使用しています。このクラスを使用すると、イメージが実際にはディバイダではなくメニュー項目であることをウィジェットに伝えることができます。メニュー項目imgに、ui-menu-itemという名前のクラスを付けることができます。だから、あなたが持つことができます。

<ul id="menu"> 
    <li>hello</li> 
    <li> 
    <img class="ui-menu-item" src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 /> 
    </li> 
    <li> 
    <img class="ui-menu-item" src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20> 
    </li> 
</ul> 

それとも、やったように、あなたが言ったクラスにdiv以内にあなたのimgを包みました。

もう1つの方法は、ウィジェットの_isDivider関数をオーバーライドすることです。しかし、これはあなたのケースでは効率が悪いです。