如何使用$（文件）。在（“点击..上<a tag?

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

来源

2012-02-18 Nair

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

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

来源

2012-02-20 00:38:10

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

来源

2012-02-18 04:43:33 JIA

请看我编辑过的笔记。它既有我的观点，也有观点模型。 – Nair 2012-02-18 05:36:38

不修复打字错误解决了这个问题？ – JIA 2012-02-18 05:37:25

当我创建这个问题时，不是复制粘贴代码，而是输入代码，而我输入代码时，我在问题中提出了错字，但代码具有正确的开头和结尾部分。 – Nair 2012-02-18 06:27:17

奈尔首先让我知道什么是你想，如果你想删除按钮的工作原理，在这里做。然后使用删除jQuery UI的功能如果你想安慰一些事情，然后只写的console.log（“你想安慰。”）;

我觉得你行function() { console.log("inside"; }); is wrong

来源

2012-02-18 04:50:09 Rain

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

来源

2012-02-18 15:39:15

我同意，我可以使它基于http://knockoutjs.com/documentation/foreach-binding.html工作，但我更感兴趣知道为什么当我使用问题中提到的绑定时失败。 – Nair 2012-02-18 17:30:05

如何使用$（文件）。在（“点击..上<a tag?

回答

相关问题