表单上的事件侦听器

Question

我正在尝试使JS事件侦听器正常工作，不确定它是否起作用。我已经在表单中添加了一个事件侦听器，但是即使启用了“保留日志”，我也无法在控制台中看到一条消息来确认我的代码正在运行。

我运行了一个脚本来将mouseider上的表单ID定位为目标，并且可以正常工作，因此我知道可以将表单ID定位为目标，但是通过'submit'事件，控制台中什么也看不到。我确保我的脚本在插件脚本之后运行。

该表格来自WordPress插件，我在此处包括了html的所有内容。

<form method="post" id="tribe-tickets__registration__form" action="myurl/checkout" data-provider="tribe_wooticket">
    <div class="tribe-tickets__registration__grid"></div>
    <div class="tribe-tickets__registration__footer">
        <div id="tribe-tickets__notice__attendee-registration">
            <div class="tribe-common-b2 tribe-tickets-notice__content"></div>
        </div>

        <button class="tribe-common-c-btn tribe-common-c-btn--small tribe-tickets__item__registration__submit"
            type="submit">Save & Checkout</button>
        <button class="tribe-common-c-btn" type="submit">Save & Checkout</button>
    </div>
</form>

jpformsubmit = document.getElementById('tribe-tickets__registration__form');

jpformsubmit.addEventListener('submit', postGift);

function postGift(e) {
    console.log('Helloooo there!!!');
}

我也尝试过

window.onload = () => {
    document.getElementById('tribe-tickets__registration__form').addEventListener('submit', postGift);
};

function postGift(e) {

    console.log('Helloooo there!!!');
}

Answer 1

尝试将e.preventDefault()添加到postGift()功能。

没有它，表单提交，页面重新加载，并且控制台日志被清除。

window.onload = () => {
  document.getElementById('tribe-tickets__registration__form')
    .addEventListener('submit', postGift);
};

function postGift(e) {

  /* add this to prevent submit */
  e.preventDefault();
  
  console.log('Helloooo there!!!');
}

<form method="post" id="tribe-tickets__registration__form" action="myurl/checkout" data-provider="tribe_wooticket">
  <div class="tribe-tickets__registration__grid"></div>
  <div class="tribe-tickets__registration__footer">
    <div id="tribe-tickets__notice__attendee-registration">
      <div class="tribe-common-b2 tribe-tickets-notice__content"></div>
    </div>

    <button class="tribe-common-c-btn tribe-common-c-btn--small tribe-tickets__item__registration__submit" type="submit">Save & Checkout</button>
    <button class="tribe-common-c-btn" type="submit">Save & Checkout</button>
  </div>
</form>