是否有办法在同一页面上触发多个表单的DOM事件?

Question

我最近为一个WordPress站点的表单编写了一个警报动作。它是有效的，但不幸的是，它只适用于第一种形式。如果页面中有多个表单，则不会触发。

有没有办法让它工作的所有形式的页面?

我代码:

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
//if ('563' == event.detail.contactFormId) {
var idform = event.detail.contactFormId;
alert (idform);
//}
}, true );
</script>
<?php
}

表单片段:

[contact-form-7 id="556" title="test 1"]

[contact-form-7 id="563" title="test 2"]

Answer 1

CF7事件在文档中冒泡出现，因此您可以这样做，

let page = document.querySelector('body');
page.addEventListener('wpcf7submit', function(e){
let idform = e.detail.contactFormId;
alert (idform);
});

Answer 2

这是最后的代码(归功于Chris G)

):

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
var wpcf7Elm = document.querySelectorAll( '.wpcf7' );
wpcf7Elm.forEach(function(formr){
formr.addEventListener( 'wpcf7submit', function( event ) {
var idform = event.detail.unitTag;
alert (idform);
}, false ); })
</script>
<?php
}