I Am Using Ajax to Pop Up a Data Loading Message and Only Works on First Click?

I am using Ajax to bring up a popup message on a table with links to do multiple data loads.  The Ajax Load message is only working correctly on the first mouse click.

Do you know why?

My code is shown below:

function loaderImage() {
    $("#loaderImage").addClass('loaderImage');

    $("#loaderImage").bind("ajaxSend", function () {
        $(this).fadeIn();  // fadeIn(100) or show()
    }).bind("ajaxStop", function () {
        $(this).hide();
        $(this).removeClass('loaderImage');
    }).bind("ajaxError", function () {
        $(this).hide();
        $(this).removeClass('loaderImage');
    });

    // Showing the Load Image on File Load
    $('#loaderImage').show();
}

.loaderImage
{
    display: none;
    position: fixed;
    top: 30%;
    left: 38%;
    margin-left: -50px; /* half width of the loader gif */
    margin-top: -50px; /* half height of the loader gif */
    text-align:center;
    z-index:9999;
    overflow: auto;
    width: 397px; /* width of the loader gif  32px */
    height: 92px; /*hight of the loader gif +2px to fix IE8 issue 32px  */
    background: url(../../Images/VehicleDataLoad.gif); 
}

 @foreach (var item in Model.PendingQueries)
            {
                <tr>
                    <td id="parm_@item.ID" onclick="loaderImage();">
                            @if (item.ViewResults)
                            {   
                                @Html.ActionLink(item.Parameters, "ViewResults", new { id = item.ID })
                            }
                            else
                            {
                                @Html.DisplayFor(itemModel => item.Parameters)
                            }
                    </td>
                    <td id="status_@item.ID">@Html.DisplayFor(itemModel => item.Status)</td>
                </tr>
            }
        </tbody>

<!-- Vehicle Loader Image -->
<div id="loaderImage" class="loaderImage"></div>

Select allOpen in new window