GLOBAL загрузки внутри каждой отдельной кнопки с Jquery в Ajax вызовов ASP.NET MVC

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

} 

Это делает трюк для одной кнопки SINGLE (так как я прохожу его идентификатор в функции), но, когда у меня есть, например, сетку с помощью кнопки на каждой строке, я обнаружил, что при управлении экраном со многими кнопками это делается для каждого из них. Главный вопрос: как я могу сделать этот метод общим для всех кнопок/ссылок на одном конкретном классе на странице? Цель: нажать кнопку, получить изображение и изменить его и остановить (может быть ручной). Я просто не хочу, чтобы Крюк ВСЕ кнопки.

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

} 

Все выше код должен быть в $ (документ) .load

Ваш HTML должен выглядеть например:

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

Нет необходимости в идентификаторе сейчас.