`$（函数提交后没有被调用按钮

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响应中的内容）。