Gif加载器在订阅后不会隐藏

Gif loader does not hides out after subscribing

本文关键字:隐藏 加载 Gif      更新时间:2023-09-26

我正试图将SendGrid订阅小部件集成到我的网站(https://github.com/sendgrid/sendgrid-subscription-widget)。该公司提供的示例代码部分可以正常工作。当我点击注册按钮时,加载器显示并显示成功消息,但gif加载器即使在收到消息后也不会隐藏。我希望加载器停止显示一旦过程完成。我已经粘贴了js代码片段。我发现不了问题。这可能是由于我的边际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>

把你的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");
    });
});

好了,我解决了:这段代码现在正在工作…他的控制台帮助了我。

    $(".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");
    });
});