javascript - 为什么我的提交表单没有在我的 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;
    . . .

...但是“提交”按钮没有触发；在我按下提交按钮 (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>

重要:

1. 实际上有一个 form 元素。您可以绑定(bind)该元素来监听它触发的事件。
2. 我们有一个带有 firstName id 的 input，以便我们稍后可以引用它。
3. 我们不会显式地将任何值绑定(bind)到它，但是，可以将它绑定(bind)到响应式(Reactive)数据源。
4. 我使用您的语法来放置提交元素，但我个人会使用 button 元素。不过没关系。

然后定义事件监听器:

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

还有一些需要考虑的事情:

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

这个设置工作得很好。请检查您的代码，看看您错过了哪些特定点。您可能会错误地放置表单层次结构中的元素，根据您遇到的问题，我认为这很可能是这样。