ロールに基づいてメニューを動的にバインドする必要があるため、文字列を ul & li タグで連結しました。選択したテキストをラベルに表示する必要があるため、クリックイベントを追加しましたが、発生しません
HTML コード
<div id='jqxWidget' style='height: 30px; display: none;background-color:#e8e8e8'>
<div id='jqxMenu' style='margin-left: 20px;'></div>
</div>
jqxmenuにバインドされた文字列
<ul id='mainid'>
<li><a href=#>Operations</a>
<ul style='width: 150px;'>
<li><a href=default.aspx?src=1010>Booking</a></li>
<li><a href=default.aspx?src=1009>Manifest </a></li>
<li><a href=default.aspx?src=1002>RunSheet</a></li>
<li><a href=default.aspx?src=1004>Delivery Updation</a></li>
<li><a href=default.aspx?src=1007>Recovery</a></li>
<li><a href=default.aspx?src=100>Local Manifest Branch</a></li>
<li><a href=default.aspx?src=5501>Extras</a></li>
<li><a href=default.aspx?src=2300>Bulk Import</a></li>
</ul>
</li>
</ul>
たとえば、マニフェストが選択されている場合、クリックイベントの上のラベルのテキストが提案を発生させないことを示す必要があります
前もって感謝します
クリックイベント用に以下のコードを試しました
$('#jqxMenu li').click(function (e) {
e.preventDefault(); // Check if the li has a parent .. To prevent double firing of li
if ($(this).parents('li').length) {
e.stopPropagation();
}
alert($(this).html());
});
クリックイベントは発生しませんが、フィドルでテストすると正常に動作します
総jqueryコードは次のとおりです
$(document).ready(function () {
var theme = getTheme();
$('#jqxMenu li').click(function (e) {
e.preventDefault(); // Check if the li has a parent .. To prevent double firing of li
if ($(this).parents('li').length) {
e.stopPropagation();
}
alert($(this).html());
});
$("#jqxMenu").css('visibility', 'visible');
$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: theme });
$("#open").bind('change', function (event) {
$("#jqxMenu").jqxMenu({ autoOpen: true });
});
$('#jqxMenu').bind('itemclick', function ()
{ $('#selid').val($(event.args).text()); });
});
クリックイベントがウェブサイトで発生しない理由についての提案は、事前に感謝します