试图通过改变它的类来改变元素的行为。 - .on("点击")
Posted
技术标签:
【中文标题】试图通过改变它的类来改变元素的行为。 - .on("点击")【英文标题】：Trying to change element behaviour by changing its class. - .on("Click") 【发布时间】：2014-05-26 15:49:31 【问题描述】：我正在构建一个 Web 应用程序，并且正在学习中。 这是我发布的第一个问题。
我创建了一系列 SPAN 元素，其行为类似于按钮。 单击一个元素（橙色元素）后，我想通过更改其类（因此将其颜色更改为灰色）来有效地禁用它。
.on("click) 之前的萤火虫：
<span class="sample_but3 sample_butOrange">3</span>
.on("click") 之后的萤火虫：
<span class="sample_but3 sample_butGrey">3</span>
我可以看到，使用萤火虫，类“.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>
【问题讨论】：
线索：事件委托 【参考方案1】：您不能将事件附加到尚不存在的元素。但是您可以将事件附加到确实存在的父元素，然后查找子目标。 jQuery 通过事件委托使这一切变得容易。这是一个例子：
$("body").on("click", ".sample_butGrey", sample_processGrey);
这告诉 jQuery 将事件附加到 body 标记，并在单击时查找类 sample_butGrey 的元素。如果找到，请调用 sample_processGrey 方法。这是一个工作示例：
http://jsfiddle.net/AyQq8/4/
【讨论】：
我测试了您的更改，效果很好。您的 jsfiddle 示例是我的代码的副本。 （即没有您建议的更改）。【参考方案2】：当 DOM 准备好时，onClick 事件被放置在选定的 JQuery 元素上。 如果需要改变点击事件，可以同时添加到目标按钮，改变按钮类。
我希望它可以帮助你理解这个问题。
祝你有美好的一天
【讨论】：
【参考方案3】：检查一下
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");
// Do something when the buttons are pressed.
$(".sample_butGrey").on("click", sample_processGrey);
$(".sample_butOrange").on("click", sample_processOrange);
DEMO
【讨论】：
【参考方案4】：您是否尝试过使用.hasClass() 来确定当前班级？或者您是否尝试在使用 elm.attr('class') 选择动态响应之前获取类以确定它是什么？您也可以使用.find() 找到容器内容中添加的新类并重新选择它，如：$('body').find('.sample_butGrey').on('click', function() /* New gray was clicked */ ) 如果它不存在，则显然它不存在，因此您可以运行失败响应或别的东西。
【讨论】：
以上是关于试图通过改变它的类来改变元素的行为。 - .on("点击")的主要内容，如果未能解决你的问题，请参考以下文章