如何使用$（文件）。在（「點擊..上<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?

回答

相關問題