我的阿贾克斯发布请求被称为两次

我有一些javascript代码在我的wordpress网站发布ajax请求到一个php文件，然后该文件生成一个报价的pdf。我的阿贾克斯发布请求被称为两次

这一切工作，但我不明白为什么第二次我提交请求（创建第二个报价，基本上），ajax请求然后被调用两次？

第一次是正确的，它被称为一次。

从第二次起，它总是被调用两次。

下面的代码：

$('#add-to-cart-quote-email-button').on('click', function() { 
    var statusIcon; 
    statusIcon = $('#quote-send-spinner'); 
    $('.send-quote-from-cart-page-container').slideToggle(); 
    statusIcon.removeClass('fa fa-check'); 
    statusIcon.removeClass('fa fa-times'); 
    $('#cart-quote-email-send-button').on('click', function(e) { 
    var data, email, name, quote_type, role; 
    e.preventDefault(); 
    name = $('.send-quote-from-cart-page-container #name'); 
    email = $('.send-quote-from-cart-page-container #email-address'); 
    role = $('.send-quote-from-cart-page-container #user-role').val(); 
    quote_type = $('.send-quote-from-cart-page-container #quote-type').val(); 
    if (!name.val()) { 
     console.log("empty name"); 
     name.addClass('invalid'); 
     return; 
    } else { 
     if (name.hasClass('invalid')) { 
     name.removeClass('invalid'); 
     } 
    } 
    if (!validateEmail(email.val())) { 
     console.log("invalid email"); 
     email.addClass('invalid'); 
     return; 
    } else { 
     if (email.hasClass('invalid')) { 
     email.removeClass('invalid'); 
     } 
    } 
    console.log("sent! to email " + (email.val()) + " and name " + (name.val())); 
    data = { 
     name: name.val(), 
     email: email.val(), 
     role: role, 
     quote_type: quote_type 
    }; 
    statusIcon.addClass('fa fa-spinner fa-spin fa-fw'); 
    $.ajax({ 
     type: 'post', 
     dataType: 'json', 
     url: '/wp-admin/admin-ajax.php', 
     data: 'cxecrt-success-get-link-url=&cxecrt-saved-cart-name=&cxecrt-landing-page=cart&action=save_cart_and_get_link_ajax', 
     success: function(response) { 
     data.cartURL = response.cart_url; 
     return $.ajax({ 
      method: 'POST', 
      url: '/wp-content/themes/theme/generate_pdf_quotes/emailQuote.php', 
      data: data, 
      success: function() { 
      console.log("success!"); 
      statusIcon.removeClass('fa fa-spinner fa-spin fa-fw'); 
      statusIcon.addClass('fa fa-check'); 
      return setTimeout(function() { 
       return $('.send-quote-from-cart-page-container').slideToggle(); 
      }, 2000); 
      }, 
      fail: function() { 
      console.log("fail"); 
      statusIcon.removeClass('fa fa-spinner fa-spin fa-fw'); 
      return statusIcon.addClass('fa fa-times'); 
      } 
     }); 
     } 
    }); 
    }); 
}); 

return;

我需要调用的第一个成功的第二个AJAX，因为他们做两件完全不同的事情，第一个是由第二个要求，即它是这样的意思，它不是（我相信）这个问题的原因

我检查了代码，但我看不出在这里有什么问题。有什么想法？

感谢

来源

2017-06-20 Nick

为什么你有嵌套的'点击'功能？ –

@NidhinChandran第一个切换容器，第二个发出请求 – Nick

我认为@Shadowfox给你正确的答案 –

您所定义的第一事件处理程序中的事件处理程序。

在第1行：

$('#add-to-cart-quote-email-button').on('click', function() {

在第7行：

$('#cart-quote-email-send-button').on('click', function(e) {

这就是为什么第二次被点击，它调用两次。我敢打赌，如果你第三次点击它，它会调用3x ;-)

来源

2017-06-20 11:12:59 Shadowfox

哦，确实够好。我虽然事件做了完全不同的事情，哪里罚款，即使嵌套..但显然不是这种情况:) – Nick

如果你想调用一些逻辑背后的第二个按钮的点击事件，使用.click（）方法，这将实际上调用该函数而不是定义处理程序。 – Shadowfox

我刚刚在第一个回调之外移动了第二个回调，现在一切都按预期工作。非常感谢这个建议 – Nick

我的阿贾克斯发布请求被称为两次

回答

相关问题