Knockout.js: Kind ein Tags nicht funktioniert, wenn Eltern-Element hat Click-Bindung

Question

Ich habe ein Menü, dass jedes Element schaltet sein eigenes Untermenü, hier ist der Beispielcode. wie Sie können Untermenüpunkt sehen, ist ein Tag, das nur

<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> 

alles Google.co.nz Links aus der ein Tag funktioniert nicht mehr funktioniert, was hier los?

Answer 1

Ihr Problem ist das Folgende: Klicken auf den Link löst das Klickereignis aus, das sich erhöht und von Ihrer showMenu Funktion gehandhabt wird und KO standardmäßig nicht das Standardverhalten des Browsers auslöst, so dass Ihr Link nicht geöffnet wird.

Was Sie brauchen, ist ein Click-Ereignishandler auf Ihren Link hinzuzufügen, die true gibt diese sagt KO den Browser Standardverhalten auszulösen und Sie müssen unter Umständen auch clickBubble Eigenschaft auf false setzen Ihre showMenu Ausführung zu verhindern:

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

Can kann mehr über die Klickbindung in der documentation lesen.

Demo JSFiddle.