JavaScript to make AJAX post on click even and then continue on with original action

I am building an A/B Testing Landing Page Plugin for WordPress.

It adds a new Custom Post Type called landingpage to WordPress.

On the landing page admin create/edit screen I have 5 main sections for the A/B Testing functionality:

• A/B Test Conversion Rules
• A/B Test Variation Winner Rules
• A/B Testing settings
• A/B Testing Page Variations
• A/B Testing Stats

A/B Testing Page Variations
These are the different page content for each version in the A/B Test. Each variation consist of a body text/html and a new title for the page.

When a visitor views the landing page for the first time. A random Variation is selected for them. This variation is then stored in a Cookie so that this user should always see this version of the page when they view this particular landing page.

A/B Test Conversion Rules
These are a set of rules defined in the Admin panel for the page. These determine what will trigger/count a conversion on that page and will record the conversion for the A/B Test Variation that is being served to the visitor when they complete the conversion.

In the admin panel this is what that set of rules looks like. Notice a page can have any number of rules which will all trigger a conversion on that page when the rule is met.

There are currently 3 types of conversion rules:

• Form with a Name attribute = _____
• Form or Link with a CSS Class attribute = _____
• Form or Link with a CSS ID attribute = _____

DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/

This is where I need some help. When a user visits a page that has Conversion Rules in the database for that page. I need to generate some JavaScript on that page that will trigger the conversion based on the rules defined for the page.

If there are 2 rules for the page….

1) Link with Class attribute = cta-link-1 is clicked on
2) Form with name attribute = form1 is submitted

Then I need JavaScript for a Click event matching buttons with CSS class = cta-link-1 and a submit event for a Form with a name = form1 to make an AJAX post to the server recording a conversion when either of the 2 actions happen.

It is important for the Form post and link clicks to continue with there original action after making the conversion AJAX post.

My 1st try/demo

This demo attaches a click event handler to clicks on links with a CSS class = cta-link-1

ON click it:
– checks for existence of a flag variable
– if the flag is not set, it makes AJAX post to save a conversion for the page.
– it then sets a flag variable to true so that on next click it will bypass the AJAX save part.
– it then triggers a click on the link again, this time the flag var is seen and bypasses the AJAX part. It should open the link now however my demo does not open the link. If you view console and click my demo link you will see that it does the ajax post and then click the link again with a trigger action and then it does nothing!

// 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;
  }
});

DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/

So I need help with making my demo work 100%

Right now a click makes the AJAX post and re-triggers a click which skips over the AJAX post on the second click. For some reason though this 2nd click does not follow and open the link.