How to use $(document).on("click.. on

Question

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

Is there something I am doing wrong which is preventing the console message to show up?
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);    
}

JIA · Answer 1 · 2012-02-18T06:31:20.310

25

Are you getting any errors?

Have you loaded the jQuery.js and the knockout.js

please post the code of view model.

ah! got it you have a typo

$(document).on("click", ".button-delete", function() {
//   console.log("inside";   <-- here it is
    console.log("inside");
 });

DEMO

edited Feb 18 '12 at 06:31

answered Feb 18 '12 at 04:43

JIA

1,485
13
11

Please see my edited notes. It has both my view and viewmodel. – Nair Feb 18 '12 at 05:36
When I created the question, rather than copy paste the code, I typed it in, while I typing it in, I made the typo in the question but the code had proper opening and closing paranthesis. – Nair Feb 18 '12 at 06:27
1

then it must be me because the click handler should fire irrespective of the KO, wait a min are you wrapping the code inside the ready handler, but should not matter because you are using event delegation it should work outside the ready handler as well – JIA Feb 18 '12 at 06:29
Thanks for the demo, When I moved the delete function to my view (html) then I can see the console messge. but when I have the same method in the viewmodel, it does not work. – Nair Feb 18 '12 at 15:25

score 3 · Accepted Answer · answered Feb 20 '12 at 00:38

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>

score 1 · Answer 3 · answered Feb 18 '12 at 04:50

Nair first let me know that what are you want to do here if you want to delete button works. then use remove function of jquery Ui and if you want to console some thing then just write console.log("you want to console");

i think your line function() { console.log("inside"; }); is wrong .

score 1 · Answer 4 · answered Feb 18 '12 at 15:39

1

I would recommend that you look at the click binding for knockout rather than mixing knockout with random query. The click binding will allow you to bind the click event to a function in the view model.

answered Feb 18 '12 at 15:39

Michael Latta

47
1
4

I agree and I can make it work based on http://knockoutjs.com/documentation/foreach-binding.html but I am more interested to know why it is failing when I use the binding mentioned in the question. – Nair Feb 18 '12 at 17:30

How to use $(document).on("click.. on

4 Answers4

Linked