title: Knockout click data binding
body: <p>I have an issue in below example <br><br></p>
  
  <p><strong>HTML CODE</strong>:<br></p>
  
  <pre><code> &lt;table id="items"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;ToDo List&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: toDoItems"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label data-bind="text: toDoItem"&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" data-bind="click: $root.removeToDoItem"&gt;Remove&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  Add item: &lt;input type="text" id="newitem" /&gt;
  &lt;button data-bind="click: addnewItem"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p><br><br>
  <strong>This is my JS code</strong>:<br></p>
  
  <pre><code>$(function () {
  
    var MetalViewModel = function() {
      var self = this;
      self.toDoItems = ko.observableArray();
  
      self.update = function() {
          self.toDoItems.removeAll();
          self.toDoItems.push(
              new metals({"Task":"This is urgent task."}),
              new metals({"Task":"You need to do it also."})
          );
      }
      self.addnewItem = function () {
          alert( $("#newitem").val() );
          self.toDoItems.push(
              new metals({"Task":$("#newitem").val()})
          );
      };
      self.removeToDoItem = function(item) {
          self.toDoItems.remove(item);
      };
  
    };
  
  var MetalViewModel = new MetalViewModel();
  var y = window.setInterval(MetalViewModel.update,1000);
  ko.applyBindings(MetalViewModel, document.getElementById("items"));
  
  });
  var metals = function (data) {
      return {
          toDoItem: ko.observable(data.Task)
      };
  };
  </code></pre>
  
  <p>Everything is working fine. Listing, removing ....<br>
  <br>
  The only issue I am facing is that when I add new item, function is totally not working... means even if I alert click binding does not reach there.</p>