Question

我有以下HTML：

<a title="Login" data-href="/MyAccount/Access/Login" 
   data-title="Admin" data-entity="n/a" 
   id="loginLink" class="nav-button dialogLink"><b>Login</b></a>

<a title="Register" 
   data-href="/MyAccount/Access/Register" 
   data-title="Admin" data-entity="n/a"
   id="registerLink" class="nav-button dialogLink"><b>Register</b></a>

当用户点击我想要的＃loginLink或#registerLink时禁用链接并调用对话框脚本。我创建了以下内容功能：

$("#loginLink, #registerLink")
    .click(function () {
        $('#loginLink').prop('disabled', true);
        $('#registerLink').prop('disabled', true);
        dialog(this);
    });

它正确调用对话框但不禁用链接，如果我多次单击按钮会调出多个对话框框。有什么我做错了吗？我不明白为什么它不起作用。

Answer 1

您必须使用jQuery的on()和off()方法来绑定/取消绑定事件。设置disabled属性对链接没有影响，单击事件仍将被触发。

在这里您可以找到描述和演示： http://api.jquery.com/off/

Answer 2

如果要随时绑定和取消绑定事件，请将代码存储在函数中，然后可以使用命名空间事件将事件与该函数关联。

function dlog(e) {
  e.preventDefault();
  dialog(this);
}

var $els = $("#loginLink, #registerLink");

$els.on('click.dlog', function(e){ dlog(e) }); // bind
$els.off('.dlog'); // unbind

修改另一种选择是使用one()只附加一次事件，然后在对话框关闭时再次附加事件。

$els .one(function(e) { dlog(e) }) .dialog({ beforeClose: function() { $els.one(function(e) { dlog(e) }); } });

Answer 3

你需要这样做

$("#loginLink, #registerLink").click(function(e) {
    e.preventDefault();
    dialog(this);
});

Answer 4

$("#loginLink, #registerLink").on("click", function () {
 dialog(this);
 return false;
});

jQuery中的

return false将同时执行e.preventDefault和e.stopPropagation，其中第二个将阻止事件冒泡，这就是你所追求的。

其他信息： event.preventDefault() vs. return false

如何使用jQuery禁用多个链接？

4 个答案: