我的阿賈克斯發佈請求被稱爲兩次

我有一些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

我的阿賈克斯發佈請求被稱爲兩次

回答

相關問題