javascript - Knockout.js: child a tags not working when parent li element has click binding -

i have menu each item toggles it's own submenu, here sample code. can see submenu item tag links out google.co.nz

  <ul id="menuholder">     <li data-bind="click: showmenu.bind($data, 1)">           main menu item         <ul class="submenu" data-bind="visible: selected() == '1'">             <li>                <a class="sub-item" href="http://google.co.nz">                     submenu item                </a>              </li>         </ul>     </li>  </ul> <script type="text/javascript">   var menumodel = function () {     var self = this;     self.selected = ko.observable(0);             self.showmenu = function (data) {         var s = self.selected();         if (s > 0 && data == s)             self.selected(0);         else             self.selected(data);     };      } ko.applybindings(new menumodel(), document.getelementbyid("menuholder")); </script> 

everything works tag no longer works, what's wrong here?

your problem following: clicking on link raises click event boubles , gets handled showmenu function , default ko won't trigger default behavour of browser link won't open.

what need add click event handler on link returns true tells ko trigger browser default behaviour , may need set clickbubble property false prevent showmenu execution:

<a class="sub-item" href="http://google.co.nz"    data-bind="click: function(){ return true }, clickbubble: false" >       submenu item </a> 

can can read more click binding in documentation.

demo jsfiddle.