如何使用 $(document).on("click.. on <a 标签？答案

【问题标题】：How to use $(document).on("click.. on <a tag?如何使用 $(document).on("click.. on <a 标签？
【发布时间】：2012-02-20 08:38:10
【问题描述】：

我是 jQuery 新手，我正在使用 jQuery 1.7.1 来学习 Knockout JS，我正在关注作者的视频演示。在他的例子中，他有一个类似

的标签

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

在视图模型中他有类似的东西

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

当我尝试点击删除按钮时，我从未在 Chrome F12 屏幕的控制台窗口上看到 console.log。我这里有两部分问题

我做错了什么导致控制台消息无法显示？
如果我没有课做 css，有没有其他方法可以在 viewmodel 中执行相同的任务？

编辑：我纠正了我的错字，代码有适当的括号（我使用网络矩阵，所以它会处理这些问题）。这是我的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>

这是我的淘汰视图模型

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

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

你有什么错误吗？

您是否加载了jQuery.js 和knockout.js

请贴出视图模型的代码。

啊！知道你有错别字

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

DEMO

【讨论】：

请看我编辑的笔记。它有我的视图和视图模型。
当我创建问题时，我没有复制粘贴代码，而是输入了它，当我输入它时，我在问题中打错了，但代码有正确的开头和结尾括号。
那么一定是我，因为无论 KO 是什么，点击处理程序都应该触发，请稍等一下，您是否将代码包装在就绪处理程序中，但应该没关系，因为您使用的是事件委托，它应该可以工作也在就绪处理程序之外
感谢演示，当我将删除功能移动到我的视图 (html) 时，我可以看到控制台消息。但是当我在视图模型中使用相同的方法时，它不起作用。

【解决方案2】：

看来您已经得到了第一个答案。如果您没有类名，则在绑定单击事件的“其他方式”上，有几个选项。您可以在标签中添加一个 id，并以这种方式调用它。或者，如果您不想添加类或 id，则可以使用带有“click”内置绑定的数据绑定语法来调用视图模型上的方法（显然这不是 jquery evnet 样式，所以这取决于你想如何连接你的事件）。像这样：

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

【讨论】：

【解决方案3】：

奈尔先告诉我你想在这里做什么如果你想删除按钮的作品。然后使用 jquery Ui 的删除功能，如果你想控制一些事情，那么只需编写 console.log("you want to console");

我认为你的线路 function() { console.log("inside"; }); is wrong 。

【讨论】：

【解决方案4】：

我建议您查看敲除的点击绑定，而不是将敲除与随机查询混合使用。点击绑定将允许您将点击事件绑定到视图模型中的函数。

【讨论】：

我同意，我可以根据knockoutjs.com/documentation/foreach-binding.html 使其工作，但我更想知道为什么使用问题中提到的绑定时它会失败。