`$（函數提交後沒有被調用按鈕

Question

我使用stripe.js來學習自定義付款，我使用.net MVC創建一個簡單的網站來處理付款。我對webdev並不陌生，不能爲生我找出爲什麼這個js函數在提交按鈕點擊後沒有被調用，我現在把標記放入ViewBag中，這樣我就可以查看數據了。進一步的上下文中，我想處理令牌服務器端，同時生成令牌客戶端，我可能錯過了一些簡單的，但在這一點上，我已經嘗試了我能找到的所有東西

這是我用來測試卡充電的代碼 這是一個部分cshtml文件，在輸入數據時，這個cshtml將通過調用@Html.Partial("~/Views/Home/processors.cshtml")

@using System.Web.Mvc 
@using System.Web.Mvc.Html 
@using System 
@using System.Web.UI 
@model Dependency_Injection_MEF_MVC.Models.Payment 

    <script type="text/javascript" src="https://js.stripe.com/v2/"></script> 
    <script type="text/javascript"> 
     Stripe.setPublishableKey('pk_test_rob8TRTyyRseiTwrqSmheKiZ'); 
    </script> 

    <script type="text/javascript"> 
     $(function() { 
      var $form = $('#payment-form'); 
      $form.submit(function (event) { 
       // Disable the submit button to prevent repeated clicks: 
       $form.find('.submit').prop('disabled', true); 

       // Request a token from Stripe: 
       Stripe.card.createToken($form, stripeResponseHandler); 

       // Prevent the form from being submitted: 
       return false; 
      }); 
     }); 

     function stripeResponseHandler(status, response) { 
      // Grab the form: 
      var $form = $('#payment-form'); 

      if (response.error) { // Problem! 

       // Show the errors on the form: 
       $form.find('.payment-errors').text(response.error.message); 
       $form.find('.submit').prop('disabled', false); // Re-enable submission 

      } else { // Token was created! 

       // Get the token ID: 
       var token = response.id; 

       // Insert the token ID into the form so it gets submitted to the server: 
       $form.append($('<input type="hidden" name="Token">').val(token)); 

       // Submit the form: 
       $form.get(0).submit(); 
      } 
     }; 
    </script> 


<div class="row"> 
    <div class="col-md-12 form-column"> 
     <div class="form-container"> 
      <form asp-controller="home" asp-action="InvoicePayment" method="POST" id="payment-form"> 
       <span class="payment-errors"></span> 

       <div class="form-group"> 
        <h3>Membership Amount: USD XX</h3> 
       </div> 

       <div class="form-group"> 
        <label for="cardNumber">Card Number</label> 
        <input class="form-control form-input" id="cardNumber" type="text" size="20" data-stripe="number" style= "width:250px;height:25px;font-size:120%"> 
       </div> 

       <div class="form-group"> 
        <label>Expiration (MM/YY)</label> 
        <div> 
         <input class="form-control form-input date-input" type="text" size="2" data-stripe="exp_month" style= "width:250px;height:25px;font-size:120%"> 
         <input class="form-control form-input date-input" type="text" size="2" data-stripe="exp_year" style= "width:250px;height:25px;font-size:120%"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="cvc">CVC</label> 
        <input class="form-control form-input" id="cvc" type="text" size="4" data-stripe="cvc" style= "width:250px;height:25px;font-size:120%"> 
       </div> 

       <input class="submit" type="submit" id="submit" value="Submit Payment"> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 1

您的JavaScript在您指定的實際表單存在之前運行。您需要將它移動到HTML格式之後，或者更好，在關閉正文標記之前。

UPDATE

，可能會導致你的事件處理程序不會被解僱是唯一的東西：

1. 它不結合形成。這可能是由許多因素造成的，其中之一是上面討論的原始問題。所以，正如我所說的，您的JavaScript必須在它所針對的HTML之後運行，所以不要僅僅因爲它仍然無法正常工作而將其移回。還有其他問題。這也可能是由選擇器不匹配引起的，但在這裏似乎不是這種情況。

2. 存在阻止腳本運行的JavaScript錯誤。 JavaScript中斷了錯誤，所以任何進一步的JavaScript都不會運行。不過，您聲稱沒有錯誤報告，所以這似乎也不是問題。

3. 唯一的另外一個問題是，作爲對AJAX請求的HTML響應的一部分包含的JavaScript未運行。儘管您沒有明確提到過AJAX，但您的問題似乎表明此表單可能會作爲AJAX請求的結果顯示出來。爲了安全起見，瀏覽器將在AJAX響應中轉義任何腳本標記，所以你只是在那裏運氣不好。您唯一的選擇是將此腳本作爲主視圖的一部分，然後推遲您的事件處理程序綁定。例如：

   $(body).on('submit', '#payment-form', function() { 
   

   這將允許你綁定到#payment-form即使它目前不存在在頁面上，你實際上是結合body和jQuery會直接轉給的#payment-form處理此事件後，氣泡直到那裏。但是，您不應該實際綁定到body。我這樣做只是因爲它保證了工作，但它也非常低效。您應該選擇與綁定時存在的付款表單絕對最接近的父級（即，不包含在AJAX響應中的內容）。