jQuery li click事件觸發兩次

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();