Question

我使用stripe.js来学习自定义付款，我使用.net MVC来创建一个处理付款的简单网站。我对webdev相当新，并且不能终身让我弄清楚为什么在提交按钮点击后没有调用这个js函数，我现在将令牌放入ViewBag，这样我就有了查看数据的方法。进一步的上下文，我想在生成令牌客户端时处理令牌服务器端。我可能遗漏了一些简单的东西，但此时我已经尝试了所有我能找到的东西。

这是我用来测试卡充电的代码。这是一个部分cshtml文件，在数据输入时，将通过调用@Html.Partial("~/Views/Home/processors.cshtml")显示此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之后，或者甚至更好，在结束正文标记之前。

<强>更新

唯一可能导致事件处理程序不被触发的事情是：

它不会绑定到表单。这可能是由许多因素造成的，其中一个因素是上面讨论的原始问题。所以，就像我说的那样，你的JavaScript必须在它所针对的HTML之后运行，所以不要仅仅因为它仍然无法运行它。还有其他问题在起作用。它也可能是由选择器不匹配造成的，但这似乎不是这种情况。
有一个JavaScript错误导致脚本无法运行。 JavaScript会因错误而中断，因此任何进一步的JavaScript都无法运行。但是，您声称没有报告错误，所以这似乎也不是问题。
唯一的另一件事是，作为对AJAX请求的HTML响应的一部分而包含的JavaScript未运行。虽然，您没有明确提到AJAX，但您的问题似乎表明此表单可能是作为AJAX请求的结果显示的。为了安全起见，浏览器将在AJAX响应中转义任何脚本标记，因此您只是运气不好。您唯一的选择是将此脚本作为主视图的一部分包含在内，然后推迟事件处理程序绑定。例如：
```
$(body).on('submit', '#payment-form', function () {
```
这将允许您绑定到#payment-form，即使它当前不存在于页面上，因为您实际上绑定到body并且jQuery将简单地转发到{{1}的处理一旦事件冒泡到那里。但是，您实际上不应该绑定到#payment-form。我这样做只是因为它确保有效，但效率也非常低。您应该选择与绑定时存在的付款表格绝对最接近的父项（即不包含在AJAX响应中的内容）。

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

1 个答案: