Question

我使用jQuery为li元素创建了一个click事件。由于某种原因，这个事件被解雇了两次，有人能发现我的错误吗？

HTML：

<ul class="menu">
    @foreach (var group in Model)
    {
        <li class="group">@group.GroupDesc</li>
    }
</ul>

Java脚本：

$('ul.menu li').click(function (e) {
    var li = this;
    alert(li.innerHTML);
});

CSS：

.group
{
    margin:4px;
    padding-top:60px;
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    width:150px;
    height:100px;
    color:White;
    background-color:#00b5fa;
    font-weight:bold;
    box-shadow: 10px 10px 9px rgba(0, 0, 0, 0.22);
    border:3px solid #059ae4;
}

Answer 1

我认为你的事件会被绑定两次，所以在绑定新的事件之前先尝试解绑前绑定的eventHandler。

$('ul.menu li').unbind("click");

$('ul.menu li').click(function (e) {
    var li = this;
    alert(li.innerHTML);
});

Answer 2

$('ul.menu li').click(function (e) {
    var li = this;
    alert(li.innerHTML);
    return false ;  // e.preventDefault();
});

或

$("ul.menu li").off().on("click", function(e) {
        var li = this;
        alert(li.innerHTML);       
    });

Answer 3

尝试在提醒后添加此内容（li.innerHTML）;

e.stopPropagation();
e.preventDefault();

jQuery li click事件触发两次

3 个答案: