title: Knockout.js: child a tags not working when parent li element has click binding
body: <p>I have a menu that each item toggles it's own submenu, here is the sample code. as you can see submenu item is a tag that links out to google.co.nz</p>
  
  <pre><code>  &lt;ul id="menuHolder"&gt;
      &lt;li data-bind="click: showMenu.bind($data, 1)"&gt; 
           Main menu item
          &lt;ul class="submenu" data-bind="visible: selected() == '1'"&gt;
              &lt;li&gt;
                 &lt;a class="sub-item" href="http://google.co.nz"&gt;
                      Submenu item
                 &lt;/a&gt;
               &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
  &lt;script type="text/javascript"&gt;
    var menuModel = function () {
      var self = this;
      self.selected = ko.observable(0);        
      self.showMenu = function (data) {
          var s = self.selected();
          if (s &gt; 0 &amp;&amp; data == s)
              self.selected(0);
          else
              self.selected(data);
      };     
  }
  ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));
  &lt;/script&gt;
  </code></pre>
  
  <p>everything works only the a tag no longer works, what's wrong here?</p>