我的ajax post请求被调用两次

时间:2017-06-20 11:07:54

标签: javascript jquery ajax

我的wordpress网站上有一些javascript代码,它将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,因为它们做了两个完全不同的事情,第一个是第二个需要的,它意味着就像那样而且它是&#39 ;(不相信)这个问题的原因

我检查了代码,但我在这里看不到任何错误。 有什么想法吗?

感谢

1 个答案:

答案 0 :(得分:2)

您正在第一个eventHandler中定义一个eventHandler。

第1行:

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

第7行:

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

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