元素的外观仅在第二次单击时更改

我编写了以下脚本，允许我创建按钮，当您单击它们时将执行ajax请求。点击它后，脚本将添加类"btn-loading"到按钮，禁用它，当ajax请求成功时，脚本将把按钮更改回原始状态。

添加类和添加disabled属性在jsfiddle和我的网站上都可以正常工作，并且我在控制台中没有看到错误。

脚本:

jQuery.fn.extend({
    loadingButton: function (options) {
        return this.each(function () {
            var btn = $(this);
            btn.click(function () {
                btn.addClass("btn-loading");
                btn.attr('disabled','');
                var ajaxCall = {
                    url: options.url,
                    type: options.type,
                    success: function (data) {
                        options.success(data);
                        btn.removeClass("btn-loading");
                        btn.removeAttr('disabled');
                    }
                };
                if (typeof (options.data) !== 'undefined') {
                    ajaxCall.data = options.data;
                }
                $.ajax(ajaxCall);
            });
        });
    }
});

用法:

$(document).ready(function () { 
    $("#loadButton").loadingButton({
        url: "/echo/jsonp/",
        success: function(data) {
            console.log(data);
        }
    });
});

jsfiddle

在jsfiddle中，这工作得很好。但在我的网站上，似乎只有背景图像不改变，它不会禁用按钮，当你点击它的第一次，虽然点击它的第二次工作很好。

我试着寻找一个解决方案，但是如果我不知道问题是什么，我就不知道要找什么。谁能告诉我我哪里做错了?

——编辑

这似乎与背景图像的加载时间有关。当我添加一个按钮到已经有"btn-loading"类的页面，然后单击按钮没有类，一切工作正常