Question

我需要根据角色动态绑定菜单，因此我将字符串连接到ul＆amp; li个标签。

我需要在标签中显示所选文字，因此我添加了一个点击事件，但它不会触发。

HTML代码

<div id='jqxWidget' style='height: 30px; display: none;background-color:#e8e8e8'>
    <div id='jqxMenu' style='margin-left: 20px;'></div>
</div>

点击活动

$('.jqxMenu li').click(function () {
    alert($(this).html()); 
});

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>

例如，如果选择了Manifest，我需要在click事件的标签中显示该文本。但是，它不会发射...

我为点击事件尝试了以下代码：

$('#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()); });        
});

为什么在网站上没有触发点击事件的任何建议？

提前致谢

Answer 1

您的选择器不正确，您正在使用类选择器按ID选择元素，还将您的代码放在文档就绪处理程序中，如果您想获取元素的文本内容，则应使用text代替html。

$(document).ready(function(){
    $('#mainid li a').click(function(event) {
         alert($(this).text()); 
         // event.preventDefault()  prevents the default action of the event
    });
})

Answer 2

试试这个

$('ul>#mainid>ul>li').click(function () {
        alert($(this).html()); 
});

Answer 3

选择器错误..您正在尝试访问该类而不是ID ..试试这个

$('#jqxMenu li')

试试此代码

$('#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());
});

检查FIDDLE

jquery：在两个div标签下点击li的事件

3 个答案: