Menu
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
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);
}
636
The on() is an inbuilt method in jQuery which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The DOM (Document Object Model) is a World Wide Web Consortium standard. This defines for accessing elements in the DOM tree.
The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
So Why Does It Happen? JQuery OnClick Method is bound to an element or selector on page ready/load. Therefore if that element you want to click isn't there at the time of page ready, the binding can't happen.
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
134
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>
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 .
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
