title: Bind inner div to different knockoutJS view model with the same properties
body: <p>I have an outer div that is bound to a view model with ProcessClick function and an inner div that is at runtime is bound to a different view model, but with the same function name for click. For some reason only an outer model's function also gets called before an inner VM's function does.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div id="max-outer"&gt;
     &lt;span data-bind="click: BindInner"&gt;Bind Inner&lt;/span&gt;
      &lt;br/&gt;
      &lt;br/&gt;
     &lt;span data-bind="click: ProcessClick"&gt;Outer&lt;/span&gt;
     &lt;div id="max-inner"&gt;
        &lt;span data-bind="click: ProcessClick"&gt;Inner&lt;/span&gt;
         &lt;br/&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function InnderModel() {
      self = this;
  
      self.ProcessClick = function () 
          {
              alert("Inner clicked");
          };
  }
  
  function OuterModel() {
      self = this;
  
      self.ProcessClick = function (){
              alert("Outer clicked");
          };
  
      self.BindInner = function () {
          ko.cleanNode(document.getElementById("max-inner"));
          ko.applyBindings(new InnderModel(), document.getElementById("max-inner"));
      };
  }
  
  ko.applyBindings(new OuterModel(), document.getElementById("max-outer"));
  </code></pre>
  
  <p>Here is a fiddle: 
  <a href="http://jsfiddle.net/mpavlov/H2ZnV/8/" rel="nofollow">http://jsfiddle.net/mpavlov/H2ZnV/8/</a></p>
  
  <p>An idea is that clicking Bind inner and the clicking on Inner span would only show "Inner Clicked" alert, not both. Can this be achieved somehow?</p>