如何修复Contact Form 7单选按钮选择后跳转链接错误问题

问题背景 #

我正在实现Contact Form 7单选按钮选择后跳转对应页面的功能，目前功能能运行，但偶尔会跳转到错误链接。

表单HTML代码 #

<div class="single-row">
    <b> Ich komme… </b>
        <div class="single-row">
        <span class="wpcf7-form-control-wrap" data-name="radio-899">
        <span class="wpcf7-form-control wpcf7-radio" id="menuradio">
            <span class="wpcf7-list-item first">
                <input type="radio" name="radio-899" value="... nur zur Party.">
                <span class="wpcf7-list-item-label">… nur zur Party.</span>
            </span>
            <span class="wpcf7-list-item">
                <input type="radio" name="radio-899" value="... zum Abendessen &amp; Party.">
                <span class="wpcf7-list-item-label">… zum Abendessen &amp; Party.</span>
            </span>
            <span class="wpcf7-list-item last">
                <input type="radio" name="radio-899" value="... leider nicht.">
                <span class="wpcf7-list-item-label">… leider nicht.</span>
            </span>
        </span>
    </span>
</div>

现有页脚JS代码 #

const redirect = () => {
   window.open('https://www.paypal.com/paypalme/.../25,'_blank'); 
};

const input = document.querySelector('body #menuradio input[name="radio-899"][value="... nur zur Party."]');
if(input){
  input.addEventListener("change", (event) => {
    if(event.target.value){
      document.addEventListener('wpcf7mailsent', redirect);
    } else {
      document.removeEventListener('wpcf7mailsent', redirect);
    }
  })
}
    
const redirect1 = () => {
    window.open('https://www.paypal.com/paypalme/... /30','_blank');
};

const input1 = document.querySelector('body #menuradio input[name="radio-899"][value="... zum Abendessen & Party."]');
if(input1){
  input1.addEventListener("change", (event) => {
    if(event.target.value){
      document.addEventListener('wpcf7mailsent', redirect1);
    } else {
      document.removeEventListener('wpcf7mailsent', redirect1);
    }
  })
}
    
const inputNotGoing = document.querySelector('body #menuradio input[name="radio-899"][value="... leider nicht."]');
    if (inputNotGoing) {
      inputNotGoing.addEventListener("change", (event) => {
        if (event.target.checked) {
          document.removeEventListener('wpcf7mailsent', redirect);
          document.removeEventListener('wpcf7mailsent', redirect1);
        }
      })
    }

问题分析 #

1. 判断逻辑错误：单选按钮的value是固定属性，不会随选中状态改变，原代码用event.target.value作为判断条件始终为真，导致切换选项时可能重复绑定跳转监听。
2. 转义字符不匹配：HTML中单选框的value是... zum Abendessen & Party.，但JS选择器里写的是... zum Abendessen & Party.，导致无法精准匹配目标元素。
3. 监听叠加问题：切换选项时未彻底移除之前的跳转监听，多个监听同时存在可能触发错误跳转。

修正方案 #

重构JS逻辑，统一管理跳转映射，每次切换时先清除旧监听再绑定新的：

// 定义单选值与跳转链接的映射关系
const redirectConfig = {
  "... nur zur Party.": "https://www.paypal.com/paypalme/.../25",
  "... zum Abendessen & Party.": "https://www.paypal.com/paypalme/.../30"
};

// 通用跳转处理函数
function openRedirectUrl(url) {
  window.open(url, '_blank');
}

// 获取所有单选按钮元素
const radioButtons = document.querySelectorAll('#menuradio input[name="radio-899"]');

if (radioButtons.length) {
  // 为每个单选按钮绑定change事件
  radioButtons.forEach(btn => {
    btn.addEventListener('change', function() {
      // 先移除所有已绑定的跳转监听
      document.removeEventListener('wpcf7mailsent', openRedirectUrl);
      
      if (this.checked) {
        // 获取当前选中项对应的跳转链接
        const targetUrl = redirectConfig[this.value];
        if (targetUrl) {
          // 绑定新的跳转监听（用闭包保留当前url）
          document.addEventListener('wpcf7mailsent', () => openRedirectUrl(targetUrl));
        }
        // 若选择"leider nicht"，则不绑定任何跳转
      }
    });
  });
}

修正说明 #

• 用映射表管理单选值和跳转链接，后续修改维护更便捷。
• 监听每个单选按钮的change事件，每次切换时先清除旧的跳转监听，避免叠加触发错误。
• 通过this.checked判断选中状态，逻辑更准确。
• 直接使用单选按钮的value属性匹配映射表，避免转义字符导致的选择器匹配失败。

内容的提问来源于stack exchange，提问作者Ferdinand Wehle