将点击事件附加到按钮或链接上的类上，该类会触发 AJAX 帖子然后延迟并继续执行原始操作？答案

【问题标题】：Attach a click event to a class on a button or link which fires an AJAX post then delays and continues with the original action?将点击事件附加到按钮或链接上的类上，该类会触发 AJAX 帖子然后延迟并继续执行原始操作？
【发布时间】：2016-04-22 20:10:41
【问题描述】：

我正在为 WordPress 构建一个 A/B 测试插件，以便在某些登录页面上使用。

登录页面允许管理员在 A/B 测试变体上创建任意数字。

在登录页面编辑屏幕上，将有一些元字段用于存储在 A/B 测试变体中触发 conversion 的内容。

其中一个选项类似于：

点击了页面上具有 CSS 类名称 ____ 或 CSS ID ____ 的按钮或链接。

将 CSS 类或 ID 的名称保存到着陆页元字段的位置。

在页面模板中的网站前端。然后，我想在提供的类或 ID 上注入一些带有点击事件的 JavaScript，然后触发 AJAX 帖子，该帖子在着陆页的此 A/B 测试变体上创建转换记录。

所以我的问题在于我的 JavaScript 点击事件，它会触发 AJAX 帖子。之后，我想继续执行具有该 ID 或类的链接或按钮应该执行的操作。

所以我认为还需要一些延迟，以确保我的 AJAX 帖子有时间发布，然后继续加载页面/链接或任何操作。

如何延迟并继续我附加点击事件的按钮点击？

$("#id_from_meta_field").on("click", function(e){

    // Prevent the button or link from triggering a form submission or loading a URL link so that the AJAX below can run  
    e.preventDefault();

    $.ajax({
        url: '/create_conversion_record_on_this_ab_test_variation',
        success: function(date) {
          // continue on loading button action or link URL
        }
    });
});

【问题讨论】：

你考虑过将action封装在ajaxsuccess函数中吗？
@JeffPuckettII 是的，这可能是我想要做的，但它很简单，我不知道如何使用按钮或链接的原始操作continue
您能解释一下这种情况与stackoverflow.com/questions/7610871/…的不同之处吗？
没有什么神奇的方法可以等待 ajax 调用，然后执行按钮或锚点应该执行的任何操作，无论是重定向、执行一些 javascript 操作还是其他任何操作。
@JeffPuckettII 我认为这会起作用，谢谢

标签： javascript jquery forms

【解决方案1】：

最常见的方式是使用Ajax 的成功事件。喜欢：

$("#id_from_meta_field").on("click", function(e){
    // Prevent the button or link from triggering a.    form submission or loading a URL link so that the.    AJAX below can run  
e.preventDefault();
   DisableButton();

$.ajax({
    url: '/create_conversion_record_on_this_ab_test_variation',
    success: function(date) {
      // continue on loading button action or link
        EnableButton();
        ContinueToProcess();
    }
});
});

Function ContinueToProcess(){
    //some code here
}

【讨论】：

【解决方案2】：

我不确定是否可以处理任何类型的点击事件，但如果您能够确保所有事件处理程序都通过 jquery 注册，您可以使用$._data( element, "events" ).click 获取点击处理程序列表。这些点击处理程序可以在 ajax 完成后手动调用。以下是plunker：

http://plnkr.co/edit/1AVM2sA1iXUrwgHPbyqs

我希望这会有所帮助。

【讨论】：