$（文書）.onを使用する方法（「上..クリック<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を追加したくない場合は、データバインド構文を組み込みのバインディングと組み合せて使用して、ビューモデルのメソッドを呼び出すことができます（これは明らかにjqueryエビネットスタイルではなく、あなたのイベントまで繋ぐ方法はあなた次第です）。このように：

<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

typoを修正しても問題は解決しないのですか？ – JIA

私は質問を作成したときに、コードをコピーしてコピーするのではなく、入力したところでタイプミスをしましたが、コードには適切な開閉記号がありました。 – Nair

Nairさんは、最初に私が何であるか、あなたが働くボタンを削除したい場合は、ここをしたいことを知ってみましょう。その後、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

$（文書）.onを使用する方法（「上..クリック<a tag?

答えて

関連する問題