title: jQuery li click event fires twice
body: <p>I've created a click event for the <code>li</code> element using jQuery. This event is fired twice for some reason, can anyone spot where my mistake is?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul class="menu"&gt;
      @foreach (var group in Model)
      {
          &lt;li class="group"&gt;@group.GroupDesc&lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Java script:</strong></p>
  
  <pre><code>$('ul.menu li').click(function (e) {
      var li = this;
      alert(li.innerHTML);
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>