javascript - 检测 HTML 元素上的类无法正常工作

Question

我有一个按钮，当单击它时，它应该向 HTML 元素添加一个类，但是当单击 .class 时，不会检测到它。

这是用例:

• 点击按钮 - “testerclass”将添加到 HTML 元素
• 点击“testerclass”- 从该元素中删除该类

单击“testerclass”时的检测似乎仅在页面加载之前存在类时才起作用，而不是在加载后手动添加类时起作用。这与问题有关吗？

我尝试在 jsfiddle 上重新创建该问题，但无法重新创建该类已添加到 HTML 元素中的用例，因为我无法在 jsfiddle 上对其进行编辑。

但是here is jsfiddle one ，在这个例子中，您可以看到 Buttonone 在 HTML 中添加了一个类，但是对 .testerclass 的点击检测从未通过。

和here is jsfiddle two 。在这个例子中，我将 .testerclass 选择器更改为 html，这表明 HTML 点击正在冒泡(当我第一次遇到这个问题时我不确定)。

离线时，我创建了第三个测试用例，其中 HTML 元素已经具有 testerclass，并且它检测到发送到它的点击。

$(document).ready(function() {
    $('button.1').click(function() {
        $('html').addClass('testerclass');
        $('.test').append('"testerclass" added to html<br />');
    });

    $('.testerclass').click(function() {
        $('.test').append('testerclass clicked and removed<br />');
        $('html').removeClass('testerclass');
    });
});

编辑:我也尝试用稍微不同的方法来做到这一点:

$('html').click(function() {
    if(this).hasClass('testerclass') {
        //do stuff
    }
});

但这也不起作用。

Answer 1

由于 testerclass 是动态的，因此您需要使用事件委托(delegate)来处理基于它的事件。这将要求我们将事件处理程序注册到文档对象，这会导致另一个问题，因为来自按钮的单击事件将传播到文档对象，这也会触发 testerclass 单击处理程序。为了防止这种情况发生，您可以停止按钮的事件传播。

$(document).ready(function () {
    $('button.1').click(function (e) {
        e.stopPropagation();
        $('html').addClass('testerclass');
        $('.test').append('"testerclass" added to html<br />');
    });

    $(document).on('click', '.testerclass', function () {
        $('.test').append('testerclass clicked and removed<br />');
        $('html').removeClass('testerclass');
    });
});

演示:Fiddle