event.target jquery：構文の相違

Question

私はDavid TurnbullのSecond Meteor App（To-doリストアプリ）チュートリアルを行っていますが、同様のイベントには別のjquery構文が使用されています。 ..

最初の部分は、タスクを追加する機能が含まれます。

HTML：

<template name="addTodo"> 
<form> 
Create a task: 
<input type="text" placeholder="Type a task here..." name="todoName" autocomplete="off"> 
</form> 
</template> 

JS：

Template.addTodo.events({ 
'submit form': function(event){ 
    event.preventDefault(); 
    var todoName = $('[name="todoName"]').val(); 
    Todos.insert({ 
    name: todoName, 
    completed: false, 
    createdAt: new Date() 
    }); 
} 
}); 

Template.todoItem.events({ 
'keyup [name=todoItem]': function(event){ 
    var documentId = this._id; 
    var todoItem = $(event.target).val(); 
    Todos.update({ _id: documentId }, {$set: {name: todoItem }}); 
    } 
}); 

Iは、（第2の部分に以下event.targetクエリを使用しようとした：

HTML：

<template name="todos"> 
{{> addTodo}} 
<ul> 
{{# each todo}} 
    {{> todoItem}} 
{{/each}} 
</ul> 
</template> 

<template name="todoItem"> 
<li> 
    <input type="text" value="{{name}}" name="todoItem"> 
</li> 
</template> 

JS

第二の部分は、keyUpイベント機能を使用して編集作業を伴い編集作業）、それは動作しませんでした：

var todoItem = $('[name="todoItem"]').val(); 

なぜですか？どんな場合に使うのですか？

Answer 1

複数のtodoItemがあり、それらの名前はすべて同じです。代わりに、jqueryなしでevent.target.inputName.valueを試してください。

//event 
Template.todoItem.events({ 
    'keyup [name=todoItem]': function(event){ 
     var documentId = this._id; 
     var todoItem = event.target.todoItem.value; 
     Todos.update({ _id: documentId }, {$set: {name: todoItem }}); 
    } 
}); 

入力がユニークなID /クラスを持っていない可能性があります。 <li></li>を<form></form>（event.target）に置き換えても、それが最良の解決策であるとは思わない場合はうまくいくはずです。おそらく<input>にid="{{_id}}"のような各タスクのIDを追加し、そのIDを使用して要素を選択します。