I have the following scenario: I have a button\link with a image inside like this:

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

We are OK here! Now what I need to do is: I want on the click that the image change for a loading element that is previously loaded in the page like this:

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

And then when the load complete turn back the old button image, I ended with this code:

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

}

This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page? The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.