在 asp.net mvc 的 ajax 调用中使用 Jquery 全局加载每个按钮

Question

我有以下场景： 我有一个按钮\链接，里面有一个图像，如下所示：

<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage"  />
SaveData!!!</button> 

我们在这里一切都好！现在我需要做的是： 我希望单击后，图像会更改之前加载到页面中的加载元素，如下所示：

<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;"  alt="loading"/>

然后，当加载完成后转回旧按钮图像时，我以以下代码结束：

function loader() {
    var $button = $('#myButton');

    if (btnState == '1') {
        $button.find('img').hide();
        $button.prepend($('#loadingImage'));
        $('#loadingImage').css({ 'display': 'inherit' });
        btnState = '0';
    }
    else {

        $button.find('img').hide();
        $button.prepend($('#defaultImage'));
        $('#defaultImage').show();

        btnState = '1';
    }

}

这可以解决“单个”按钮的问题（因为我在函数中传递了它的 ID）但是，例如，当我有一个每行都有一个按钮的网格时，我发现在管理具有许多按钮的屏幕时对每个按钮执行此操作是不可行的。主要问题是：如何使该方法适用于页面中一个特定类上的所有按钮/链接？ 目标是：单击按钮，获取图像并更改它并停止（可以手动）。我只是不想钩住所有按钮。

Answer 1

你应该做这样的事情，它将防止用户重复提交：

$('.button').click(function(evt) {
    evt.preventDefault();    
    var button = this;
    hideButton(button);
    $('ID or CLASS').load('AJAX FILE URL', function() {
         //On success, show button remove image
         showButton(button);
    });
});

function hideButton(button) {
    $(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}

function showButton(button) {
    $(button).next('img').hide();
    $(button).show();

}

上面的所有代码都应该在 $(document).load 中

你的 HTML 应该如下所示：

<button type="submit" class="button"><img src="../../Content/images/check.png"   />SaveData!!!</button>

现在任何东西都不需要 Id。