Question

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

我正在尝试检测具有class =“locked”的元素并点击并返回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 demo here

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

编辑：谢谢您的有用答案！

Answer 1

使用.on()

由于您的内容为loaded dynamically，因此无法访问directly。

在加载时，即DOM ready动态加载的内容不属于DOM。

所以你必须使用event Delegation。

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

Answer 2

因为'.locked'是动态添加/删除最近的静态父元素上的委托，如

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

DEMO

Answer 3

执行此代码时：

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

您要将click事件添加到在代码执行时锁定类的任何元素。然后将click事件绑定到元素，并不关心元素在单击发生时是否仍然锁定了类。

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

$("#block").removeClass("locked").unbind("click");

Answer 4

使用event.preventDefault()方法取消活动。尝试：

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

删除后的jQuery检测类

4 个答案: