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元素已经有了测试类，并且它检测到发送给它的点击。

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

您需要停止传播到html，以便其他点击处理程序不会接收它。

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

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

其他选项是添加一个事件处理程序并使用事件目标来查看它是否是按钮并以此方式更改内容。

$(document).on("click", function (evt) {        
    var isButton = $(evt.target).is(".btn");
    var message = isButton ? '<p>"testerclass" added to html</p>' : '<p>"testerclass" clicked and removed</p>'
    $('html').toggleClass('testerclass', isButton);
    $(".test").append(message);
});

JSFiddle：http://jsfiddle.net/69scv/

Answer 2

由于testerclass是动态的，因此您需要使用事件委派来处理基于此的事件。这将要求我们将事件处理程序注册到导致另一个问题的文档对象，因为来自按钮的单击事件将传播到文档对象，这将触发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

Answer 3

这是一个巧妙的方法

$('html').on('click', function(e) {
    var state = !!$(e.target).closest('button.1').length;
    var msg   = state ? 'class added' : 'class removed';

    $(this).toggleClass('testerclass', state); 
    $('.test').append(msg + '<br>');
});

FIDDLE

Answer 4

您向html元素添加了一个类，因此单击此类时，表示单击了html元素。现在问题是当你点击页面中的任何位置时，它将从html中删除这个类！让我们尝试将此类添加到body元素中。

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

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

现在你可以检查一下：

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

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

4 个答案: