有人知道如何在jquery中禁用一个链接而不使用return false吗?
具体来说，我要做的是禁用一个项目的链接，使用jquery执行点击它触发一些东西，然后重新启用该链接，以便如果它再次单击它作为默认工作。
谢谢。 戴夫
更新 这是代码。在应用.expanded类之后，它需要做的是重新启用被禁用的链接。
$('ul li').click(function(e) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
//return false;
});
当前回答
$('#myLink').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
这将防止超链接的默认行为，即访问指定的href。
jQuery教程:
对于点击和大多数其他事件，您 可以防止默认行为- 点击链接，进入jquery。com -通过在事件处理程序中调用event. preventdefault ()
如果只希望在满足某个条件(例如隐藏了某些东西)时才使用preventDefault()，则可以使用扩展的类测试ul的可见性。如果它是可见的(即不隐藏)，链接应该正常触发，因为If语句不会被输入，因此默认行为将不会被阻止:
$('ul li').click(function(e) {
if($('ul.expanded').is(':hidden')) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
}
});
其他回答
作为后端工程师，我花了一段时间来思考如何做到这一点，但下面是我如何解决完全相同的问题。
const resendCodeTimeOutPeriodInMs = 30000; // 30seconds.
function resend2faCodeOnLogin(sendByEmail) {
const resendCodeLinkElement = $('#resendCodeLink');
const disabledState = resendCodeLinkElement.attr('disabled');
if (disabledState === 'disabled') {
resendCodeLinkElement.preventDefault();
} else {
resendCodeLinkElement.attr("disabled", true);
resendCodeLinkElement.addClass('disabled');
submitForm('#twoFactorResendCodeForm', (response) => {
setTimeout(function () {
$('#resendCodeLink').removeClass('disabled');
resendCodeLinkElement.attr("disabled", false);
}, resendCodeTimeOutPeriodInMs);
}, (response) => {
console.error(response);
});
}
}
标准CSS摘自网络上著名的例子:
a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
我的方法是确保一个给定的按钮在用户体验可以再次点击它之前被禁用30秒。
$('#myLink').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
这将防止超链接的默认行为，即访问指定的href。
jQuery教程:
对于点击和大多数其他事件，您 可以防止默认行为- 点击链接，进入jquery。com -通过在事件处理程序中调用event. preventdefault ()
如果只希望在满足某个条件(例如隐藏了某些东西)时才使用preventDefault()，则可以使用扩展的类测试ul的可见性。如果它是可见的(即不隐藏)，链接应该正常触发，因为If语句不会被输入，因此默认行为将不会被阻止:
$('ul li').click(function(e) {
if($('ul.expanded').is(':hidden')) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
}
});
下面是另一个css/jQuery解决方案，我更喜欢它的简洁和最小化脚本:
css:
a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
jQuery:
$('.disableAfterClick').click(function (e) {
$(this).addClass('disabled');
});
这适用于内联设置了onclick属性的链接。这也允许您稍后删除“返回false”以启用它。
//disable all links matching class
$('.yourLinkClass').each(function(index) {
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", "return false; " + OnClickValue);
});
//enable all edit links
$('.yourLinkClass').each(function (index) {
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", OnClickValue.replace("return false; ", ""));
});
你可以隐藏和显示你喜欢的链接
$(link).hide();
$(link).show();
