Geek asks and answers

Knockout.js: child tags that do not work when the element of the parent element has a click binding

I have a menu in which each item switches its own submenu, here is a sample code. as you see the submenu item, this is a tag that refers to 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 only the tag no longer works, what is wrong here?

+5
source share
1 answer

Your problem is this: clicking on the link triggers a click event, which is doubled and processed by your function showMenu, and by default KO will not trigger the default browser behavior, so your link will not open.

, true, KO , clickBubble false, showMenu :

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

documentation.

JSFiddle.

+7

More articles:


All Articles