Question

我编写了以下脚本以允许我创建按钮，当您单击它们时将执行ajax请求。单击后，脚本将添加类＆＃34; btn-loading＆＃34;按钮，禁用它，当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中，这完全正常。但是在我的网站上，似乎只有背景图像没有改变，当你第一次点击它时它不会禁用按钮，虽然第二次点击它可以正常工作。

我尝试过寻找解决方案，但如果我不知道问题所在，我就不知道该搜索什么。谁能告诉我我做错了什么？

- 修改

这似乎与背景图片的加载时间有关。当我向已经有＆＃34; btn-loading＆＃34;的页面添加一个按钮时类，然后单击没有类的按钮，everthing工作正常。

Answer 1

我在css-tricks.com上找到了关于预加载图片的an article：

使用图像预加载的一个重要原因是，如果要在mouseOver或：hover事件上使用图像作为元素的背景图像。如果你只在CSS中使用背景图像作为：悬停状态，那么直到第一个：悬停事件才会加载该图像，因此鼠标越过该区域和图像实际显示之间会有一个短暂的烦人延迟

这可能是我的背景图像在第一次点击时没有显示的原因，因为当我预加载背景图像时，该按钮被禁用并显示背景图像。

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

1 个答案: