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.
Comments
Post a Comment