WordPress下WPPayForm表单提交后执行JavaScript代码异常问题求助

问题原因 #

submit 是表单元素的专属事件，你之前将该事件绑定到提交按钮（.wpf_submit_button）上，事件本身就不会触发，这是代码不生效的核心原因。而click是所有可见元素都支持的点击事件，所以绑定到按钮上可以正常触发。

另外还有一个常见隐藏问题：WPPayForm默认是AJAX异步提交表单，即使你把submit事件绑定到form元素上，也会出现表单提交后页面没跳转、原生submit事件逻辑执行时机不对的情况。而且用click事件的话，会出现用户点击按钮但表单验证不通过也触发统计的错误统计问题。

推荐解决方案（最稳定） #

直接使用WPPayForm官方提供的表单提交成功自定义事件，只有当表单验证通过、提交成功后才会执行你的统计代码，兼容所有表单提交场景：

jQuery(document).on('wppayform/form_submission_success', function() {
    ny.track({
        name: (new URL(window.location.href)).searchParams.get("utm_source"),
        value: 24.50,
        unit: "CHF"
    });
});

你直接把这段代码替换掉你之前加的JS代码即可。

替代方案（使用原生submit事件） #

如果你确实需要用原生submit事件，需要将事件绑定到表单元素而非提交按钮：

jQuery('.wppayform_form').submit(function() {
    ny.track({
        name: (new URL(window.location.href)).searchParams.get("utm_source"),
        value: 24.50,
        unit: "CHF"
    });
});

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