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) 具有 Class 属性的链接 = cta-link-1 被点击
2)提交name属性为form1的表单

然后我需要 JavaScript 来实现 Click 事件匹配按钮与 CSS class = cta-link-1 和 Form 的提交事件 name = form1 来制作当 2 个操作中的任何一个发生时，向服务器记录转换的 AJAX 帖子。

在转换 AJAX 帖子后，表单帖子和链接点击继续原始操作非常重要。

---

我的第一次尝试/演示

此演示将点击事件处理程序附加到点击具有 CSS 类 = 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
          }
        },