jQuery 如何使用 $(document).on("click.. on <a 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9338618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use $(document).on("click.. on <a tag?
提问by Nair
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
我是 jQuery 的新手，我正在使用 jQuery 1.7.1 来学习 Knockout JS，我正在关注作者的视频演示。在他的例子中，他有一个类似的标签
<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
当我在我身边尝试单击删除按钮时，我从未在 Chrome F12 屏幕的控制台窗口中看到 console.log 出现。我在这里有两部分问题
- 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?
- 是不是我做错了什么阻止了控制台消息显示？
- 如果我没有做 css 的类，还有其他方法可以在 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
编辑：我更正了我的错字，代码有正确的括号（我使用网络矩阵，所以它会处理这些问题）。这是我的 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);
}
采纳答案by John Papa
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:
看起来你已经得到了第一个答案。如果您没有类名，则在绑定单击事件的“其他方式”上，有几个选项。您可以在标签中添加一个 id，然后这样称呼它。或者，如果您不想添加类或 id，则可以使用带有“click”内置绑定的数据绑定语法来调用视图模型上的方法（显然这不是 jquery evnet 样式，所以这取决于你想如何连接你的事件）。像这样：
<button data-bind="click: someMethod">Click me</button>
回答by JIA
Are you getting any errors?
你有任何错误吗？
Have you loaded the jQuery.jsand the knockout.js
你有没有加载jQuery.js和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");
});
回答by Rain
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");
Nair 首先让我知道，如果您想删除按钮有效，您想在这里做什么。然后使用 jquery Ui 的删除功能，如果你想控制台一些东西，那么只需写 console.log("you want to console");
i think your line function() { console.log("inside"; }); is wrong.
我想你的路线function() { console.log("inside"; }); is wrong。
回答by Michael Latta
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.
我建议您查看用于淘汰赛的点击绑定，而不是将淘汰赛与随机查询混合在一起。单击绑定将允许您将单击事件绑定到视图模型中的函数。
