jQuery li click event fires twice

Question

I've created a click event for the li element using jQuery. This event is fired twice for some reason, can anyone spot where my mistake is?

HTML:

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

Java script:

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

I think your event gets bind twice, so try by unbinding previously bound eventHandler before binding new one.

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

or

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

Answer 3

Try adding this after alert(li.innerHTML);

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