Метеорное событие поджигает неправильный метод

Этот код клиента Meteor, когда кнопка CLEARнажата, консоль браузера печатаетCheck entries, но ожидается, что он будет срабатывать только при нажатии на INFOкнопки и только если plateимеет значение null.
Что я сделал неправильно и как это исправить? тнх

Template.body.events({
  'submit form': function (event) {
   event.preventDefault();
   footerInfo();
 }
});

Template.footer.events({
  'click #clear': () => {
    Session.set('busy', false);
    document.getElementById('plate').value = '';
    Session.set('plate', '');
    searching = '';
  },
  'click #info': () => {
    footerInfo();
  }
});

footerInfo = () => {
  let plate = document.getElementById('plate').value;
  if (!plate) {
    console.log('Check entries');  //<-- prints even when CLEAR is clicked.
    Session.set('busy', false);
    return;
  }
  Session.set('plate', plate);
  let doc = myCol.findOne({plate: Session.get('plate')});
};
<body>
  <div id="main">
    <div id="content">
      <form>
        <button type="submit" style="display:none"></button>
            {{> content}}
            {{> footer}}
      </form>
    </div>
  </div>
</body>

<template name="content">
    <input type="text" id="plate" autocomplete="off">
</template>

<template name="footer">
  <footer>
    <button id="clear">CLEAR</button>
    <button id="info">INFO</button>
  </footer>
</template>

1 ответ

  1. в общем, вы, вероятно, захотите использовать функциональность отправки формы Meteor для обработки этого (c.f. https://www.meteor.com/tutorials/blaze/forms-and-events ) но ваша настройка немного странная, потому что кнопки находятся в другом шаблоне, чем форма.

    здесь я, скорее всего, сохраню общую структуру и добавлю «событие».preventDefault () » вверху каждого обработчика событий.

    если по какой-то причине это не работает, также добавьте «событие.stopImmediatePropagation ()».

    но я думаю, что это должно сделать это:

    Template.footer.events({
      'click #clear': (event) => {
        event.preventDefault();
        Session.set('busy', false);
        document.getElementById('plate').value = '';
        Session.set('plate', '');
        searching = '';
      },
      'click #info': (event) => {
        event.preventDefault();
        footerInfo();
      }
    });