title: How to use $(document).on("click.. on <a tag?
body: <p>I am new to jQuery and I am using jQuery 1.7.1 to learn Knockout JS, I was following a video demo by the author. In his example he has a tag something like </p>
  
  <pre><code>&lt;a href="#" class="button-delete"&gt;Delete&lt;/a&gt;
  </code></pre>
  
  <p>and in the viewmodel he has something like</p>
  
  <pre><code>$(document).on("click", ".button-delete", function() { console.log("inside"); });
  </code></pre>
  
  <p>When I tried in my side when I click on the delete button I never see the console.log show up on the console window of the Chrome F12 screen. I have two part question here</p>
  
  <ol>
  <li>Is there something I am doing wrong which is preventing the console message to show up?</li>
  <li>If I do not have a class to do css, is there any other way to perform the same task in the viewmodel?</li>
  </ol>
  
  <p>edit:
  I corrected my typo, the code has proper parenthesis (I use web matrix so it take care of those issues). Here is my html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;script src="Scripts/jquery-1.7.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="Scripts/knockout-2.0.0.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="Scripts/ViewModel.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
      &lt;input data-bind="value: tagsToAdd"/&gt;
      &lt;button data-bind="click: addTag"&gt;Add&lt;/button&gt;
     &lt;ul data-bind="foreach: tags"&gt;
             &lt;li&gt;
                 &lt;span data-bind="text: Name"&gt;&lt;/span&gt;
                 &lt;div&gt;
                     &lt;a href="#" class="btn btn-danger" &gt;Delete&lt;/a&gt;
                 &lt;/div&gt;
             &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my knockout viewmodel</p>
  
  <pre><code>/// &lt;reference file="jquery-1.7.1.js" /&gt;
  /// &lt;reference file="knockout-2.0.0.js" /&gt;
  
  var data = [
     {Id: 1, Name: "Ball Handling" },
     {Id: 2, Name: "Shooting" },
     {Id: 3, Name: "Rebounding" }
  ];
  
  function viewModel()
  {
      var self = this;    
      self.tags = ko.observableArray(data);
       self.tagsToAdd = ko.observable("");
  
      self.addTag = function() {
         self.tags.push({ Name: this.tagsToAdd() });
         self.tagsToAdd("");
      }
  }
  
  
  $(document).on("click", ".btn-danger", function () {
      console.log("inside");
      });
  
  
   var viewModelInstance;
  function init(){
      this.viewModelInstance = new viewModel();
      ko.applyBindings(viewModelInstance);    
  }
  </code></pre>