javascript - 处理 `keyup` 事件时出错

Question

我是 meteor 的新手，请任何人帮助我解决以下问题。

首先让我明确一下我在做什么项目。

我有一个存储用户详细信息的集合，所以我想编辑用户信息。我正在使用 iron-router，因此当我在 URL 中输入 user_id 时，它会在文本框中显示用户详细信息，以便我可以对其进行编辑。

当我点击“编辑”按钮时，我可以保存已编辑的用户详细信息，但我想自动更新详细信息，所以我尝试使用 keyup 事件，但它不起作用。

当我处理 keyup 事件而不是 submit 时出现以下错误:

Cannot read property 'value' of undefined at Object.keyup .sub

下面是我的js代码:

Router.route('/temp1/:_id', function () {
  var pid = this.params._id;
  this.render('temp1', {
    data: function () {
      return Dbs.findOne({ user_id: pid });
      Router.go("/temp1", {}, { id: pid });
    }
  });
});

Template.temp1.events({
  'keyup .sub'(event)  {
    const target = event.target;
    const user_id1 = target.user_id.value;
    const add1 = target.add.value;   
    const cont1 = target.cont.value;
    const pth1 = target.pth.value;

    var p = Dbs.findOne({ user_id: Router.current().params._id });
    Dbs.update({ _id: p._id }, {
      $set: {
        user_id: user_id1,
        cont: cont1,
        add: add1,
        pth: pth1
      }
    });
    console.log(user_id1);
    alert(user_id1);
  }
});

HTML代码:

  <form class="sub">
    <input type="text" name="user_id" value="{{user_id}}"/>
    <input type="text" name="add" value="{{add}}"/>
    <input type="text" name="cont" value="{{cont}}"/>
    <input type="text" name="pth" value="{{pth}}" />

    <!--<center><input type="submit" value="Submit" class="waves-effect #607d8b grey btn"></center>-->
 </form>

Answer 1

当您使用submit .sub 事件时 — 在您的处理程序中，event.target 是 form，这就是为什么构造像 target.user_id.value 正在工作。

当你使用 keyup.sub 事件时——这个 keyup 事件从它的 input 元素冒泡到表单，因此 event.target 将指向调度此事件的 input。

有两种方法可以“解决”您的问题:

1. 使用 event.currentTarget 而不是 event.target

2. 替换这一行:

   const target = event.target;

   用这个:

   const target = $(event.target).closest('form').get(0);

   因此您的 target 变量将始终指向 form 元素。