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>

重要的：

实际上有一个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();
    }
});

要考虑的事情还有很多：

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

此设置完美无缺。请查看您的代码，看看您错过了哪一点。您可能会错误地放置表单层次结构中的元素，根据您遇到的问题，我觉得这很可能。

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

1 个答案: