Question

I have the following:

 <button id="refreshLink" class="blue" type="button" title="Refresh Grid"
                data-entity="Topic"
                data-href="/Admin/Contents/Reference">
                <span class="center-icon sprite-arrow-circle"></span></button>

and this jQuery code:

$('#refreshLink')
.click(function () {
    if ($(this).hasClass("blue")) {
        $(this).removeClass('blue').addClass('grey');
        refreshGrid($(this).attr('data-entity')); ;
    }
    return false;
});

I thought that this would stop multiple clicks but it still seems to let the user click more than once and get multiple refreshes.

Is there a way I can disable and enable the links using jQuery? Also is there some queue that clicks go into if a user clicks multiple times?

Answer 1

you can select the element by it’s class:

$('button.blue').click(function () {
    $(this).removeClass('blue').addClass('grey');
    refreshGrid($(this).attr('data-entity')); ;
    return false;
});

or use jQuery one() method:

Attach a handler to an event for the elements. The handler is executed at most once per element.

$('#refreshLink').one('click', function () {
    $(this).removeClass('blue').addClass('grey');
    refreshGrid($(this).attr('data-entity')); ;
    return false;
});