Home/ Questions/Q 7523241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T02:44:24+00:00

I am new to jQuery and I am using jQuery 1.7.1 to learn Knockout

  • 0

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 

<a href="#" class="button-delete">Delete</a>

and in the viewmodel he has something like

$(document).on("click", ".button-delete", function() { console.log("inside"); });

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

  1. Is there something I am doing wrong which is preventing the console message to show up?
  2. If I do not have a class to do css, is there any other way to perform the same task in the viewmodel?

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

<!DOCTYPE html>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
<script src="Scripts/ViewModel.js" type="text/javascript"></script>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body onload="init()">
    <input data-bind="value: tagsToAdd"/>
    <button data-bind="click: addTag">Add</button>
   <ul data-bind="foreach: tags">
           <li>
               <span data-bind="text: Name"></span>
               <div>
                   <a href="#" class="btn btn-danger" >Delete</a>
               </div>
           </li>
   </ul>
</body>
</html>

Here is my knockout viewmodel

/// <reference file="jquery-1.7.1.js" />
/// <reference file="knockout-2.0.0.js" />

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);    
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like you got your first answer already. On the “other ways” to bind the click event if you don;t have a class name, there are a few options. You could add an id to the tag, and call it that way. Or if you don’t want to add a class nor an id, you can use the data-bind syntax with the “click” built-in binding to invoke a method on your view model (obviously this is not the jquery evnet style, so its up to you how you want to wire up your events). Like this:

    <button data-bind="click: someMethod">Click me</button>
    • 0