无法使用meteorjs中的点击事件获取输入值答案

【问题标题】：Cannot get the input value using click event in meteorjs无法使用meteorjs中的点击事件获取输入值
【发布时间】：2016-06-28 12:34:44
【问题描述】：

我是流星新手，在点击事件中遇到了一些问题。

代码是：

Template.addPost.events({
 'click button':function(event){
    event.preventDefault();
    var postName=event.target.postName.value;
    Posts.insert({
      name:postName,
      createdAt:new Date()
    });
    event.target.postName.value='';
  }
});

HTML 代码是：

<template name='addPost'>
  <input type='text' placeholder='Add post here' name='postName'>
  <button class="btn btn" type="button">Post</button>
</template>

但是在浏览器中单击按钮时，输入值不会插入到 mongo 数据库中。

【问题讨论】：

你确定事件没有被触发吗？可能是事件触发但由于缺少权限而添加到集合失败？您可以在事件处理程序中使用 console.log 来确定它是否触发
var postName=event.target.postName.value; var postName = $('#myinput').val();
@iiro 先生，我放置了 console.log(postName);在 Posts.insert 之前，它没有在控制台中显示任何内容。但是在给出 id='myinput' 并使用 var postName = $('#myinput').val();它工作得很好。你能告诉我为什么它不能使用 javascript 代码工作..
@Areca Sir 我放置了 console.log(postName);在 Posts.insert 之前，它没有在控制台中显示任何内容。但是在给出 id='myinput' 并使用 var postName = $('#myinput').val();它工作得很好。你能告诉我为什么它不能使用 javascript 代码工作..
我告诉你看看 console.log(event.target) 看看它给出了什么:) 你的代码不起作用的原因是 event.target 没有一个名为 'postName 的属性'。

标签： javascript jquery meteor meteor-blaze

【解决方案1】：

点击事件在按钮上，但您想在插入中引用输入字段的值。您已经有一个 name 用于您的 input 字段，因此您可以使用 jQuery 和名称选择器来引用它：

Template.addPost.events({
 'click button': function(event){
    event.preventDefault();
    var postName = $('input[name="postName"]').val();
    Posts.insert({ name: postName, createdAt: new Date() });
    $('input[name="postName"]').val('');
  }
});

【讨论】：

Sir in javascript 'postName' 不起作用，因为它不是事件目标（按钮）的一部分，但使用 jQuery 'postName' 工作正常。为什么会这样？
jQuery 查看整个 DOM 并根据 选择器 选择您想要的元素 - 在本例中为 'input[name="postName"]'

【解决方案2】：

你不能访问 postName 输入的值

var postName=event.target.postName.value;

postName 不是事件目标（按钮本身）的成员。将 id 属性添加到输入并访问其上的值将解决您的问题。所以访问它：

postName = $('#myinput').val();

【讨论】：

另一个允许正确定位输入字段数据的选项是将输入和按钮放入表单中。然后使用按钮作为“提交”表单字段也可以通过target.<field name>.value 访问，因为<form> 现在是目标。
谢谢，我明白了。因为 'id' 是一个全局属性，因此应该使用它而不是 name 属性。非常感谢。

【解决方案3】：

您提供的信息非常有限。那里有几个不同的场景。

您确定要调用正确的事件吗？在您的 Posts.insert() 方法上方，尝试控制台记录 postName 变量。

您是否摆脱了自动发布和不安全的软件包？

【讨论】：

先生，正如你所说，我放置了 console.log(postName);在 Posts.insert 之前，它没有在控制台中显示任何内容。
别忘了检查 CLI。如果它显示“未定义”或类似的内容，那么您正在调用正确的方法，但输入错误。如果您什么都看不到，正如您所提到的，那么请尝试检查您的事件。从那里开始。祝你好运。 :)