1

我正在尝试创建一个通用的“锁定”类，它会阻止用户在加载块时与任何元素（锚点、按钮等）进行交互。没有什么真正花哨或安全的，只是简单的加载锁。

我正在尝试检测对具有 class="locked" 的元素的点击并通过 return false; 拒绝点击。我的问题是，即使在元素完成加载并删除“锁定”类之后，jQuery 仍然检测到该元素具有它。

代码在这里：

HTML

<div id="block"></div>

CSS

#block {
background-color:#ccc;
width:300px;
height:100px;
}

jQuery

$(document).ready(function () {

$("#block").addClass("locked");
$("#block").html("locked");

setTimeout(function () {
    $("#block").removeClass("locked");
    $("#block").html("unlocked !");
}, 4000);


$(".locked").click(function () {
    alert("locked! denying click event");
    return false;
});

});

可以看到 jsFiddle 中发生了什么：（打开开发工具可以看到 4 秒后类已经被移除）

jsFiddle 演示在这里

这是一个错误还是我做错了什么（不推荐）？

编辑：感谢您提供有用的答案！

4

4 回答 4

3

使用.on()

由于您的内容是loaded dynamically您无法访问它们directly。

在加载时，即DOM ready动态加载的内容不是 DOM 的一部分。

所以你必须使用event Delegation.

$(document).on('click','.locked',function () {
    alert("locked! denying click event");
    return false;
});
于 2013-09-25T15:00:20.267 回答
1

由于 '.locked' 是像这样在最近的静态父元素上动态添加/删除的委托

$(document).on('click','.locked',function () {
    alert("locked! denying click event");
    return false;
});

演示

于 2013-09-25T14:59:33.363 回答
1

当您执行此代码时：

$(".locked").click(function () {
    alert("locked! denying click event");
    return false;
});

您正在将该单击事件添加到在代码执行时锁定类的任何元素。然后点击事件被绑定到元素上，并且不关心在点击发生时元素是否仍然有类锁定。

一种解决方法是在删除锁定的类时取消绑定单击事件：

$("#block").removeClass("locked").unbind("click");
于 2013-09-25T15:05:45.670 回答
0

使用event.preventDefault()方法取消事件。尝试：

$(".locked").click(function () {
event.preventDefault();
    alert("locked! denying click event");
    });
于 2013-09-25T15:17:12.633 回答