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

或使用jQuery one()方法：

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

$('#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;
});

Live DEMO

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

2 个答案: