Jquery-ui wählen Menü mit Symbol - wählen Sie nicht funktioniert

Question

Ich erstellt ein jquery-ui Auswahlmenü mit Symbolen, aber beim Klicken auf die Select-Funktion wird nicht aufgerufen.

Gegenstände, die Text reagieren müssen klicken Sie richtig unten:

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:

fand ich aus irgendeinem Grund, dass jQueryUI die Bilder eine Teiler Klasse anstelle einer Menüpunkt Klasse gibt.

ich mein Problem durch Hinzufügen eines zusätzlichen div wie diese

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

lösen

Ich hoffe immer noch eine bessere Lösung/Erklärung möglich ist

Answer 1

Basierend auf jQuery UI Menu Widget documentation, es behandelt Listen Sie Elemente mit Leerzeichen oder Bindestrichen als Menütrenner auf (lesen Sie here).

In Ihrem Fall denke ich, weil Sie nichts auf dem Menüpunkt außer einem Bild haben, wird das Element als Teiler behandelt.

Das Widget verwendet jedoch funktionale CSS-Klassen, mit denen Sie dem Widget mitteilen können, dass das Bild tatsächlich ein Menüelement und nicht ein Teiler ist. Sie können Ihrem Menüeintrag img eine Klasse namens ui-menu-item zuweisen. So können Sie haben:

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

Oder wie Sie taten, wickeln Sie Ihre img innerhalb einer div mit der genannten Klasse.

Eine andere Option besteht darin, die _isDivider-Funktion des Widgets zu überschreiben. Aber das ist in Ihrem Fall weniger effizient.