为什么 wpcf7submit 事件在联系表单 7 中不起作用？

Question

我正在尝试从 WordPress 网站上的联系表单 7 表单捕获 wpcf7submit 事件，以便在表单成功提交时触发警报。但是，该事件似乎没有触发我附加的功能。这是我在 footer.php 文件的脚本标记中使用的代码片段，位于正文内容之后：

<div class="contact-form">
  <h2 class="contact-form__title">Contact</h2>
  <?php echo apply_shortcodes('[contact-form-7 id="fbe8376" title="Contact Form 1"]'); ?>
</div>

document.addEventListener('DOMContentLoaded', function() {
  const wpcf7Elm = document.querySelector('.wpcf7');
  console.log(wpcf7Elm); // For debugging: to verify that the element is being selected.
  wpcf7Elm.addEventListener('wpcf7submit', function(event) {
    alert("Fire!");
  }, false);
});

我通过检查控制台输出确认 .wpcf7 元素存在于 DOM 中，控制台输出正确记录了该元素。这表明脚本在尝试附加事件侦听器之前正确等待 DOM 完全加载。

尽管如此，提交表单时不会出现警报。我已经在控制台中检查了 JavaScript 错误，但没有发现任何似乎相关的错误。表单本身运行良好并按预期提交。

我想知道捕获此类 wpcf7submit 事件是否存在任何已知问题，或者我尝试附加事件侦听器的方式是否有问题。是否与其他脚本存在冲突，或者 Contact Form 7 是否需要不同的方法来捕获提交事件？

Answer 1

我有一个相关问题；我制作了一个很酷的网站，它从我的客户那里收集所有数据，然后以编程方式（javascript）将所有内容放入隐藏的 CF7 中，但是当我以编程方式启动 CF7 提交（类似于“wpcf7.submit()”）时，没有一个其他监听器被触发。 我无法捕获“wpcf7submit”或“wpcf7mailsent”事件......他们只是保持沉默。 但当我“实际”按下 CF7 表单上的提交按钮时，他们会发出警报。 我该怎么做才能捕捉到这些事件！我迫切需要知道表单已提交，并且我还想导航到其他子页面。