jquery - 如何使用 jQuery 启用和禁用链接？

Question

我有以下内容：

 <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>

和这个 jQuery 代码：

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

我认为这会停止多次点击，但它似乎仍然让用户多次点击并获得多次刷新。

有没有办法可以使用 jQuery 禁用和启用链接？如果用户点击多次，是否还有一些点击进入的队列？

Answer 1

您可以按其类选择元素：

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

或使用 jQueryone()方法：

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

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

Answer 2

您只能对那些具有蓝色类的按钮执行刷新。此外，您可能希望使用toggleClass()在类之间切换。

$('#refreshLink.blue').click(function () {
    $(this).toggleClass('blue grey');
    $(this).prop('disabled', true);
    refreshGrid($(this).attr('data-entity')); ;
    return false;
});

现场演示