如何使用 jquery 单击按钮后在按钮旁边显示 ajax 加载图像

Question

我有一个运行 ajax get 的按钮，这需要很长时间。在按钮右侧显示 ajax 加载图像的最简单方法是什么？

它是动态的（与布局中的硬编码div相比）

我可能会稍后在布局中移动按钮，所以我希望在单击事件之后（调用ajax之前）

    $(selector).append("<img src='/images/ajax-loading1.gif' />");

，我尝试了这个：但这似乎并没有做任何事

Answer 1

您可能需要 after 而不是 append。

$(selector).after("<img src='/images/ajax-loading1.gif' />");

但考虑到 AJAX 完成后图标的删除，怎么样：

$(selector).bind('click', function () {
    var spinner = $("<img src='/images/ajax-loading1.gif' />").insertAfter(this);

    jQuery.ajax({
        success: function (response) {
            // handle response

            spinner.remove();
        });
    });
});

Answer 2

如果问题是图像的放置，那么为什么不对图像和按钮使用带有定位（可以根据需要更改）的 css 类。

如果问题是 ajax 运行缓慢，我认为我们需要更多信息。

Answer 3

在运行 ajax 调用之前，请使用 after() 函数：

$('.button').after('<img class="loading-ajax" src="/images/loading.gif" alt="Loading" />');

然后在 ajax 请求完成后删除该元素：

$('.loading-ajax').remove();