Question

我正在构建一个Web应用程序，并且正在学习这是我发布的第一个问题。

我创建了一系列SPAN元素，其行为类似于按钮单击一个元素（橙色元素）后，我想通过更改其类（因此其颜色为灰色）来有效地禁用它。

.on之前的Firebug（＆＃34;点击）：

<span class="sample_but3 sample_butOrange">3</span>

.on之后的Firebug（＆＃34;点击＆＃34;）：

<span class="sample_but3 sample_butGrey">3</span>

我可以使用firebug看到该类＆＃34; .sample_butOrange＆＃34;被删除，班级＆＃34; .sample_butGrey＆＃34;完全按照我的预期添加。但它的下一点让我难过。

现在，如果我点击灰色按钮（原本是橙色），我仍然会收到警告，我按下橙色按钮，而不是被警告我按下灰色按钮。

注意：我已发出警报，通知按下了哪个按钮。

有人可以向我解释发生了什么吗？

以下是完整的代码示例：

<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>

Answer 1

您无法将事件附加到尚不存在的元素上。但是，您可以将事件附加到确实存在的父元素，然后查找子目标。 jQuery使事件委派变得简单。这是一个例子：

$("body").on("click", ".sample_butGrey", sample_processGrey);

这告诉jQuery将一个事件附加到body标签，并在单击时查找带有sample_butGrey类的元素。如果找到则调用sample_processGrey方法。这是一个有效的例子：

http://jsfiddle.net/AyQq8/4/

Answer 2

onClick事件放在DOM准备好时选择的JQuery元素上。如果您需要更改click事件，可以在同一时间将其添加到目标按钮以更改按钮类。

我希望它可以帮助您理解这个问题。

度过愉快的一天

Answer 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

Answer 4

您是否尝试过使用.hasClass()来确定当前的课程？或者您是否尝试在使用elm.attr('class')选择动态响应之前获取类以确定它是什么？您还可以使用.find()查找在容器内容中添加的新类，然后重新选择它，如：$('body').find('.sample_butGrey').on('click', function(){ /* New gray was clicked */ })如果它不存在，显然它不是那里，你可以运行失败响应或其他东西。

尝试通过更改其类来更改元素行为。 - .on（“点击”）

4 个答案: