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() 失败，您希望阻止默认行为。您确定不想要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()的适当位置停用代码。

仅使用{{1}}会使链接看起来可点击，如果它实际上什么都不做，那可能是糟糕的UI设计。

如何确保在加载页面时默认禁用链接

2 个答案: