订阅

Question

我正在尝试将SendGrid订阅小部件集成到我的网站（https://github.com/sendgrid/sendgrid-subscription-widget）中。该公司提供的示例代码部分正常运行。当我点击注册按钮时，加载器显示并显示成功消息，但即使在收到消息后，gif加载程序也不会隐藏。我希望加载程序在进程完成后立即停止显示。我已经粘贴了js代码片段。我无法发现问题。这可能是由于我的边缘知识。

    $(".sendgrid-subscription-widget").on("sent", function () {
    $(this).addClass("loading")
           .append("<img src=\"http://i.imgur.com/6RMhx.gif\" alt=\"Loading...\">");
    $(this).find("input[type=submit").attr("disabled", "disabled");

    $(".sendgrid-subscription-widget").on("success error", function () {
        $(this).removeClass("loading")
        $(this).find("img").remove();
        $(this).find("input[type=submit").removeAttr("disabled");
    });
}); 

HTML标记

<div class="sendgrid-subscription-widget" data-token="1M5Z249eGJzJ34D5llN3s2KkzNImaU9gZp8ImuJSw1pmhsJvugAYeWJXhtK1aWLO" data-executed="true">
    <form>
        <div class="response"></div>
        <label>
            <span>Email</span>
            <input type="email" name="email" placeholder="you@example.com" />
        </label>
        <input type="submit" value="submit" />
    </form>

<img src="http://i.imgur.com/6RMhx.gif" alt="Loading...">
</div>

Answer 1

将你的Js改为：

$(".sendgrid-subscription-widget").on("sent", function () {
    $(this).addClass("loading")
           .append("<img src=\"http://i.imgur.com/6RMhx.gif\" alt=\"Loading...\">");
    $(this).find("input[type=submit").attr("disabled", "disabled");

    $(".sendgrid-subscription-widget").on("success error", function () {
        $(this).removeClass("loading")
        $(document).find(".loading img").remove();
        $(this).find("input[type=submit").removeAttr("disabled");
    });
});

Answer 2

好的，我解决了这个问题：这个代码现在正在运行... js console帮助了我。

    $(".sendgrid-subscription-widget").on("sent", function () {
    $(this).addClass("loading")
           .append("<img src=\"http://i.imgur.com/6RMhx.gif\" alt=\"Loading...\">");
    $(this).find("input[type=submit]").attr("disabled", "disabled");


    $(".sendgrid-subscription-widget").on("success error", function () {
        $(this).removeClass("loading")
        $(this).find("img").remove();
        $(this).find("input[type=submit]").removeAttr("disabled");
    });
});