试图通过改变它的类来改变元素的行为。 - .on("点击")答案

【问题标题】：Trying to change element behaviour by changing its class. - .on("Click")试图通过改变它的类来改变元素的行为。 - .on("点击")
【发布时间】：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>

【问题讨论】：

线索：事件委托

标签： javascript jquery class button jquery-selectors

【解决方案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 */ }) 如果它不存在，则显然它不存在，因此您可以运行失败响应或别的东西。

【讨论】：