title: knockoutjs click binding not working in nested foreach
body: <p>So i have a really weird problem with a knockoutjs click binding not getting attached to anchor tags. Other data-bind="" works but not the click binding.</p>
  
  <p>Below you can see the HTML and part of the viewmodel js file</p>
  
  <pre><code>var tag = function (data) {
      this.count = data.Count;
      this.id = data.Id;
      this.title = data.Title;
      this.tagGroup = data.TagGroup;
  };
   var tagContainer = function (data) {
      this.tagList = $.map(data.Tags, function (item) { return new tag(item); }); 
      this.letter = ko.observable(data.Letter);
  };
  
  var searchViewModel = function(){
     var self = this;
  
     self.tagContainerList = ko.observableArray([]); 
  
     self.addFilter = function (tag) { 
      //move tag to active filters and do some more cool stuff here 
      };
  
  
  };
  
  &lt;div id="modal-all-tags" data-bind="with:searchViewModel"&gt;
      &lt;ul data-bind="foreach:tagContainerList"&gt;
          &lt;li&gt;
              &lt;span data-bind="text:$data.letter()"&gt;&lt;/span&gt;
              &lt;ul data-bind="foreach:tagList"&gt;
                  &lt;li&gt;&lt;a href="#" data-bind="click:$root.addFilter"&gt;&lt;span data-bind="text:title"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
        &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically it is a modal popup and its loaded when user clicks a link on the page. 
  I send a request to server and it returns me a list of Tag Containers each have the starting Letter and a list of tags to be rendered below the letter like this:
  A
   a word 1
   a word 2
  B
   b word 1
   b word 2
  C 
   c word 1
   c word 2</p>
  
  <p>and so on...</p>
  
  <p>The letters are rendered correctly A,B,C and each gets the correct tag list rendered below them with text:title displaying correctly.</p>
  
  <p>Everything works except the addFilter(); function that i want to bind to each link in the taglist. The browser just jumps up and adds a hash character to the url. Firebug is not showing any errors on bindings either. </p>
  
  <p>The reason the div container has a with:searchViewModel is because there is a master viewmodel for the whole page. But this should not matter since it is working on every other page of the project.</p>
  
  <p>The only thing i can think of is that the click binding $root.addFilter is wrong but i tried just addFilter where firebug gives the error "addFilter is not defined;"</p>
  
  <p>And i tried both $parent and $root.</p>
  
  <p>Does anyone have any suggestions?</p>