web-dev-qa-db-ja.com

$（document）.on（ "click .. on <a tag？

私はjQueryを初めて使用し、jQuery1.7.1を使用してKnockoutJSを学習しています。著者によるビデオ・デモをフォローしていました。彼の例では、彼は次のようなタグを持っています

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

ビューモデルでは、彼は次のようなものを持っています

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

削除ボタンをクリックしたときに自分の側で試したところ、Chrome F12画面のコンソールウィンドウにconsole.logが表示されません。ここに2つの質問があります。

  1. コンソールメッセージが表示されない原因となっている問題がありますか？
  2. Cssを実行するクラスがない場合、ビューモデルで同じタスクを実行する他の方法はありますか？

編集：タイプミスを修正しました。コードには適切な括弧が付いています（Webマトリックスを使用しているので、これらの問題を処理します）。これが私の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);    
}
jqueryknockout.js
6
Nair

あなたはすでに最初の答えを得たようです。クラス名がない場合にクリックイベントをバインドする「その他の方法」には、いくつかのオプションがあります。タグにIDを追加して、そのように呼び出すことができます。または、クラスやIDを追加したくない場合は、「クリック」組み込みバインディングでデータバインド構文を使用して、ビューモデルのメソッドを呼び出すことができます（明らかに、これはjqueryevnetスタイルではありません。したがって、イベントをどのように接続するかはあなた次第です）。このような：

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

エラーが発生していますか？

jQuery.jsとknockout.jsをロードしましたか

ビューモデルのコードを投稿してください。

ああ！タイプミスがあります

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

[〜＃〜]デモ[〜＃〜]

23
JIA

Nairはまず、ボタンを削除したい場合にここで何をしたいのかを知らせてくれました。次に、jquery Uiのremove関数を使用し、何かをコンソールしたい場合は、console.log（ "you want to console"）;と記述します。

あなたの行はfunction() { console.log("inside"; }); is wrongだと思います。

0
Rain

ノックアウトとランダムクエリを混在させるのではなく、ノックアウトのクリックバインディングを確認することをお勧めします。クリックバインディングを使用すると、クリックイベントをビューモデルの関数にバインドできます。

0
Michael Latta