加载页面时如何确保默认情况下禁用链接

Question

我有twp问题

标记链接

                <a href="/Home/DisplaySpreadSheetData" id="displaySpreadSheetLink">DisplaySpreadsheetData</a>

1）在document.ready下，我具有以下代码行，以确保默认情况下该链接处于禁用状态，但它不起作用。

        $('#displaySpreadSheetLink').bind('click', disableLink);

禁用链接的代码

    var disableLink = function (e) {       
    e.preventDefault();
    return false;      
    }

2）单击链接时，我要确保如果checkFile（）返回true，则应禁用该链接

    $('#displaySpreadSheetLink').click(function (e) {
        if (checkFile()) {          
        e.preventDefault();
    }      
});

这里有两个问题。 我该如何纠正第一个问题，而第二个问题我认为即使checkFile（）返回true，e.preventDefault（）也不会执行。 有人可以帮忙吗？

Answer 1

您可能有一个问题，因为您实际上将两个单击事件绑定到了链接。 绑定新功能之前，应先取消disableLink函数的绑定：

function disableLink(e) {
    e.preventDefault();
    // don't use return false here.
}

$(function() {
    $('#displaySpreadSheetLink').click(disableLink);
});

// later on

$('#displaySpreadSheetLink').unbind('click').click(function (e) {
    if (checkFile()) {
        e.preventDefault();
    }      
});

另外， checkFile()检查您的逻辑是否为checkFile() 。 仅基于我想知道的名字（以前从未看过您的代码），您就会想避免checkFile() 失败时的默认行为。 您确定不需要if (!checkFile()) { ... }吗？

另一种方法可能是只处理单个事件，但要考虑一些有关默认行为是否应该执行的额外状态信息：

(function($) {
    var loaded = false;
    $('#displaySpreadSheetLink').click(function(e) {
        if (!loaded || checkFile()) {
            e.preventDefault();
        }
    });
    $(function() {
        loaded = true;
    });
})(jQuery);

Answer 2

代替在页面加载后禁用具有功能的链接，您应该通过将<span>与看起来像禁用链接的CSS类一起使用来更改HTML初始禁用。

用户不必在每次单击链接时都调用checkFile()而是在各节中提供可以更改checkFile()是true还是false 。 例如，如果上传文件后checkFile()变为true ，则将代码放在文件上传功能中，以通过将<span>替换为<a>来启用链接，并在checkFile()可能会再次变为false 。

仅使用preventDefault()可使链接看起来可单击，如果它实际上不执行任何操作，则可能是不良的UI设计。