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';
    }

}

这就是ONE SINGLE按钮的技巧（因为我在函数中传递了它的ID），但是，当我有一个每行上有一个按钮的网格时，我发现在管理带有许多按钮的屏幕时这是不可行的每一个。主要问题是：如何为页面中某个特定类的所有按钮/链接创建此方法？目标是：单击按钮，获取图像并更改并停止（可以是手动）。我只是不想要Hook ALL按钮。

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。

在asp.net mvc的ajax调用中使用Jquery在每个单个按钮内进行GLOBAL加载

1 个答案: