我正在构建一个 Web 应用程序并边学边做。
这是我发布的第一个问题。
我创建了一系列 SPAN 元素，它们的行为类似于按钮。
单击一个元素(橙色元素)后，我想通过更改其类(并因此将其颜色更改为灰色)来有效地禁用它。
.on("click) 之前的 Firebug:
<span class="sample_but3 sample_butOrange">3</span>
.on("click") 之后的 Firebug:
<span class="sample_but3 sample_butGrey">3</span>
我可以看到，使用 Firebug ，类“.sample_butOrange”被删除，类“.sample_butGrey”被添加，完全符合我的预期。 但接下来的一点让我难住了。
现在，如果我单击灰色按钮(最初是橙色按钮)，我仍然会收到按下橙色按钮的提醒，而不是收到按下灰色按钮的提醒。
注意:我已经放入通知按下哪个按钮的警报。
有人可以向我解释发生了什么吗？
这里是完整的示例代码:
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample_button.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
// Grey button means do nothing.
function sample_processGrey() {
alert("You pressed the grey button. Don't do anything as this button is disabled.");
}
function sample_processOrange() {
alert("You pressed the orange button");
$(".sample_but3").addClass("sample_butGrey").removeClass("sample_butOrange");
}
$(document).ready(function () {
// Do something when the buttons are pressed.
$(".sample_butGrey").on("click", sample_processGrey);
$(".sample_butOrange").on("click", sample_processOrange);
});
</script>
</head>
<body>
<span class="sample_but1 sample_butPurple">1</span>
<span class="sample_but2 sample_butGreen">2</span>
<span class="sample_but3 sample_butOrange">3</span>
<span class="sample_but4 sample_butRed">4</span>
<span class="sample_but5 sample_butBlue">5</span>
</body>
</html>
最佳答案
您不能将事件附加到尚不存在的元素。但是您可以将事件附加到确实存在的父元素，然后查找子目标。 jQuery 通过事件委托(delegate)使这变得容易。这是一个例子:
$("body").on("click", ".sample_butGrey", sample_processGrey);
这告诉 jQuery 将事件附加到 body 标记，并在单击时查找具有类 sample_butGrey 的元素。如果找到，请调用 sample_processGrey 方法。这是一个工作示例:
关于javascript - 试图通过更改其类来更改元素行为。 -.在 ("Click"上)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23030385/