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

Question

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

我可能会在布局中稍后移动按钮，因此我希望它是动态的(与布局中的硬编码 div 相比)

点击事件之后(在调用ajax之前)，我尝试了以下操作:

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

但这似乎没有做任何事情

Answer 1

您可能想要after而不是追加。

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