为什么我的提交表单没有在我的 Meteor 应用程序中执行？

Question

我的 Meteor 应用程序中有这个 HTML：

<template name="addPerson">
   . . .
   <input id="inputbuttonPerson" name="inputbuttonPerson" type="submit" value="Save Person">
</template>

...以及此 Javascript 表单提交的事件处理程序：

Template.addPerson.events({'submit form': function(event, template) {
    alert('reached addPerson.submit form');
    console.log('reached addPerson.submit form');
    event.preventDefault();
    var firstname = template.find('#firstName').value;
    . . .

...但是 "submit" 按钮没有触发；我没有看到警报，也没有看到控制台日志文本，也没有在我混合提交按钮 (inputbuttonPerson) 后添加到 MongoDB 的记录。

为什么模板的提交按钮事件处理程序不响应提交按钮的单击？

Answer 1

您提供的信息不充分。我会尝试根据您提出的问题构建完整的画面。

假设您有一个模板：

<template name="addPerson">
    <form action="" class="form" method="">
        <input type="text" class="form-control" id="firstName" name="firstName">
        <input type="submit" class="btn" id="inputbuttonPerson" name="inputbuttonPerson">
    </form>
</template>

重要：

实际上有一个 form 元素。此元素是您绑定的元素以侦听它触发的事件。
我们有一个 input 和 firstName id，所以我们以后可以参考它。
我们没有明确地将任何值绑定到它，但是，可以将它绑定到反应式数据源。
我使用您的语法来放置提交元素，不过，我个人会使用 button 元素。不过没关系。

然后定义事件侦听器：

Template.addPerson.events({
    'submit form': function (event, template) {
        console.log('reached addPerson.submit form');
        console.log(event.target.firstName.value);
        event.preventDefault();
    }
});

还有几件事需要考虑：

我们引用 Template 对象的 addPerson 属性，即精确引用上面定义的模板。
事件是 submit form 这意味着它仅在用户提交表单时触发。这不是简单的按钮点击。它可以通过 [type=submit] 元素或在任何表单字段中按 return 键触发。
绑定事件的函数有两个参数：event对象和template实例对象。实际上，不需要使用后者。只需 event 个对象就足够了 99% 的时间。
我们console.log值event.target.firstName。 event.target 对象包含事件目标的所有子元素。由于我们正在监听表单的事件，目标是表单，因此 event.target 对象包含表单的子项。可以通过 name 访问表单的子项，因此 event.target.firstName.
特定目标子项的 value 属性提取 DOM 元素的 value 属性。输入字段具有值。 event.target.firstName.value 表达式将 return 在事件被触发时输入到字段中的任何内容。
并且 event.preventDefault() 不会被重定向到任何 URL 被定义为 action 的形式。

此设置完美无缺。请查看您的代码，看看您遗漏了哪一点。您可能会错放表单层次结构中的元素，根据您遇到的问题，我认为这是可能的。

为什么我的提交表单没有在我的 Meteor 应用程序中执行？

Why is my submit form not being executed in my Meteor app?

javascript

html

meteor

form-submit