JavaScript 使 AJAX 发布 onclick 事件，然后继续执行原始操作

Question

我正在为 WordPress 构建一个 A/B 测试登录页面插件。

它向 WordPress 添加了一个名为 landingpage 的新自定义帖子类型。

在登录页面管理创建/编辑屏幕上，我有 5 个主要部分用于 A/B 测试功能：

• A/B测试转换规则
• A/B 测试变体获胜者规则
• A/B 测试设置
• A/B 测试页面变化
• A/B 测试统计数据

---

A/B 测试页面变体
这些是 A/B 测试中每个版本的不同页面内容。每个变体都由正文/html 和页面的新标题组成。

当访问者第一次查看着陆页时。为他们选择了一个随机变体。然后将此变体存储在 Cookie 中，以便该用户在查看此特定登录页面时应始终看到此版本的页面。

A/B 测试转换规则
这些是在页面的管理面板中定义的一组规则。这些决定了什么会触发/计算该页面上的转化，并将记录在访问者完成转化时提供给访问者的 A/B 测试变体的转化。

在管理面板中，这就是一组规则的样子。请注意，一个页面可以有任意数量的规则，当满足规则时，这些规则都会在该页面上触发一次转化。

目前有3种转换规则：

• 具有 名称 属性的表单 = _____
• 带有 CSS Class 属性的表单或链接 = _____
• 带有 CSS ID 属性的表单或链接 = _____

---

演示：https://jsfiddle.net/jasondavis/88wx3hjz/9/

这是我需要帮助的地方。当用户访问在该页面的数据库中具有转换规则的页面时。我需要在该页面上生成一些 JavaScript，它将根据为页面定义的规则触发转换。

如果页面有2条规则......

1) 类属性 = cta-link-1 的链接被点击
2) 提交name属性=form1的表单

然后我需要 JavaScript 来匹配带有 CSS class= cta-link-1 的按钮的 Click 事件和名称 = form1 的表单的提交事件，以便在两者中的任何一个时将 AJAX 发布到服务器记录转换动作发生。

在进行转换 AJAX 发布后，表单发布和链接点击继续执行原始操作非常重要。

---

我的第一次尝试/演示

这个演示附加了一个点击事件处理程序来点击带有 CSS class= cta-link-1 的链接

点击它：
- 检查标志变量是否存在
- 如果未设置该标志，它会使 AJAX 发布以保存页面的转换。
- 然后将标志变量设置为 true，以便在下次单击时绕过 AJAX 保存部分。
- 然后它再次触发对链接的单击，这次看到标志 var 并绕过 AJAX 部分。它现在应该打开链接，但是我的演示没有打开链接。如果您查看控制台并单击我的演示链接，您将看到它执行 ajax 发布，然后再次单击该链接并触发操作，然后它什么也不做！

// version 1 for click event on class .cta-link-1
$('.cta-link-1').on('click', function (e, options)
{
  options = options || {};

  /* if options.record_ab_test_conversion_done flag not yet set to true, make AJAX post to record a conversion */
  if(!options.record_ab_test_conversion_done)
  {
    e.preventDefault();
    console.log('%c [1-Link Clicked] - Make AJAX post to save conversion', 'background: #222; color: #bada55');

    var pageData = {
        pageId: '123456789',
        abTestVariation: '2'
    }; 
    $.ajax({
        url : 'https://posttestserver.com/post.php?dir=jason',
        type: 'POST',
        data : pageData,
        //dataType : 'json',
        success: function(data, textStatus, jqXHR)
        {
            //data - response from server
            console.log(data);

            // retrigger the click event with record_ab_test_conversion_done set to true so that this code will  
            // run again but next time will bypass the AJAX conversion saving part
            $(e.currentTarget).trigger('click', {
              'record_ab_test_conversion_done': true
            });
        },
        error: function (jqXHR, textStatus, errorThrown)
        {

        }
    }); 

  /* if options.record_ab_test_conversion_done flag is set to true, carry on with with default action */
  }else{
    /* allow default behavior to happen */
    console.log('%c [2-Link Clicked] - Triggered from AJAX success so this click should not record a conversion and should instead open the link as normal!', 'background: #222; color: #bada55');
    return true;
  }
});

---

演示：https://jsfiddle.net/jasondavis/88wx3hjz/9/

所以我需要帮助让我的演示工作 100%

现在，点击会生成 AJAX 帖子并重新触发点击，该点击会在第二次点击时跳过 AJAX 帖子。出于某种原因，虽然第二次点击没有跟随并打开链接。

Answer 1

尝试以下方法：

$('.cta-link-1').on('click', function (e, options)
{ var el = $(this);
...



success: function(data, textStatus, jqXHR)
        {
          if (el.is('a')) {//links
             window.location = el.attr('href');//redirect to the intended url
          } else {//forms
             el.closest('form').submit();//submit that form
          }
        },