Question

我正在尝试创建一个动态的按钮列表，这些按钮会对用户做出反应。这是代码：

$('#left').on("mouseenter", 'div', function() {
    dispEvent($(this).hasClass('button');
    $(this).addClass('highlighted');
});

$('#left').on("mouseleave", 'div', function(event) {
    dispEvent($(event.target).hasClass('button');
    $(this).removeClass('highligted');
});

$('#left').on('click', 'div', function(event) {
    dispEvent(event.target == this);
    $(this).remove();
});

'＃left'id是有问题的div的静态容器（按钮面板）。 dispEvent是一个显示信息的辅助函数。我知道该函数正在执行，因为当事件发生时我的显示器正在更新我也知道它正在寻找一个html元素，该元素具有正确的类，并且事件目标和我引用的'this'是相同的（因为显示打印'true'），但由于某种原因我无法在.on（）方法中添加类。我通过$（[selector]）。hover（）将类添加到一个静态创建的按钮，以确保类名是正确的.addClass（）正常工作（它确实按预期运行）。

此外，由于$（this）.hasClass（'button'）返回true并且测试.remove（）正在删除元素，我知道它识别元素并可以将其包装到jQuery对象中并执行函数在它上面。

回顾一下。 addClass（）函数和highlight类工作时将鼠标悬停在静态对象上，.on（）识别事件并输入其代码，jQuery将对象识别为html元素并且可以对其执行至少一些函数，但它无法在.on（）中添加类。（当我有.on（）函数时，即使静态按钮也不会添加高亮类）。

对于问题的冗长而感到抱歉，但我想要彻底。谢谢你的时间。

Answer 1

代码中存在语法错误，因此根本无法运行：

dispEvent($(this).hasClass('button');

应该是：

dispEvent($(this).hasClass('button'));

第二次dispEvent电话也一样。

如果您在浏览器中打开错误控制台，则应该出现语法错误消息。

Answer 2

这非常简单。你拼错了highlighted

.highligted {
    box-shadow: 0 0 8px #FFD700;
    cursor: pointer;
}

//Event Handlers
$('#left').on("mouseenter", 'div', function() {
dispEvent($(this).hasClass('button'));
    $(this).addClass('highlighted');
});

$('#left').on("mouseleave", 'div', function(event) {
dispEvent($(event.target).hasClass('button'));
    $(this).removeClass('highligted');
});

jQuery .on（）方法不对元素执行jQuery函数

2 个答案: