下面的代码非常简单，但由于某些原因它不起作用。
我想要一个简单的功能来切换元素，每个元素将激活不同的功能。当您单击第一个元素时，它会更改第二个元素的类，当您单击第二个元素时，它会执行其他操作。
切换效果很好(没有 JS 错误)，但我不知道为什么 jQuery 不会触发对使用 javascript 添加的类的点击。我也用“addClass”和“removeClass”进行了测试，得到了相同的结果。
我已经为此创建了一个替代品(使用带有 jquery 函数“hasclass”的 if 来在您单击该元素时切换行为)。我也明白我可能会使用其他功能与计数和所有......这对我想要的不起作用但这不是重点......
我只是想知道为什么它不起作用，因为它是我确信我会再次使用的常用解决方案。代码非常简单，我想知道我是否遗漏了一些明显的东西。
这是 fiddle :https://jsfiddle.net/mhbubh8p/17/
HTML:
<div class="toggle aaa">No click so far</div>
查询
$(document).ready(function () {
$('.aaa').click(function() {
$('.toggle').toggleClass('aaa zzz');
$('.toggle').html('Class was toggled');
});
$('.zzz').click(function() {
alert("This should work...it dosent... why?");
});
});
这只是一个事件委托(delegate)的例子:
$(document).ready(function() {
$('.aaa').click(function() {
$('.toggle').toggleClass('aaa zzz');
$('.toggle').html('Class was toggled');
});
$(document).click('.zzz', function() {
alert("This should work");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle aaa">
No click so far
</div>
当您将 click 事件绑定(bind)到它时，由于带有 zzz 类的元素不存在，因此永远不会创建监听器。一种解决方法是绑定(bind)到 document 并在监听器中检查您的元素。
另一个修复方法是在创建 zzz 元素时创建监听器，如下所示:
$(document).ready(function() {
$('.aaa').click(function() {
$('.toggle').toggleClass('aaa zzz');
$('.zzz').off().click(function() {
alert("This should work");
});
$('.toggle').html('Class was toggled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle aaa">
No click so far
</div>
这种方法的一个优点是，click 监听器将在检查元素时显示在您的开发工具中(无需检查 Ancestors)。我发现这使调试更容易一些，但它也需要您使用 .off() 删除所有以前的监听器，否则您会得到重复的绑定(bind)，这是没人想要的。