我正在努力做一些非常简单的事情。基本上我有一个可点击的div’热点’，当您点击它填充屏幕并显示一些内容。我通过简单地改变div的类别，去除“现货”和添加“成长”，实现了这一点，并且还有一些CSS动画使其成长。这工作正常
问题是，在这个div内有一个close_button，目前只是文本。我希望这样可以将类别切换回去 – 即删除成长和读取的点。单击时不执行此操作。我相信这是在DOM加载时没有这些类的元素，但我是jQuery的新手，不知道如何解决这个问题。
我认为这可能是一个更明智的做法，有人可以指出我的方向吗？我会很感激我已经尝试使用toggleClass，而不是无效。
$( document ).ready(function() {
$(".clickable").click(function() {
$(this).addClass("grown");
$(this).removeClass("spot");
});
$(".close_button").click(function() {
alert (this);
$("#spot1").removeClass("grown");
$("#spot1").addClass("spot");
});
});
更新：
我现在使用这段代码，
$( document ).ready(function() {
$(document).on("click",".close_button",function () {
alert ("oi");
$("#spot1").addClass("spot");
$("#spot1").removeClass("grown");
});
$(document).on("click",".clickable",function () {
if ($(this).hasClass("spot")){
$(this).addClass("grown");
$(this).removeClass("spot");
}
});
});
奇怪的是，close_button函数仍然不会添加’spot’或删除’grow’，虽然它会添加任何其他类，它会删除其他类…我添加了if子句，因为我认为或许这两个函数都被触发在同一个时间相互破坏，但似乎没有任何区别
解决方法
会发生什么情况，你的关闭按钮放在你的.clickable div内，所以click事件将被触发这两个元素。
事件冒泡将使点击事件从子节点传播到他们的父母。所以你的.close_button回调将被执行，当达到.clickable时，它将再次切换类。因为这个运行非常快，你不会注意到这两个事件发生了。
/ \ --------------------| |----------------- | .clickable | | | | ----------------| |----------- | | | .close_button | | | | | ------------------------------ | | event bubbling | ----------------------------------------
为了防止事件达到.clickable，您需要将事件参数添加到回调函数中，然后调用stopPropagation方法。
$(".close_button").click(function (e) {
$("#spot1").addClass("spot");
$("#spot1").removeClass("grown");
e.stopPropagation();
});
小提琴：http://jsfiddle.net/u4GCk/1/
有关事件顺序的更多信息：http://www.quirksmode.org/js/events_order.html(这是我选择那个漂亮的ASCII艺术=])
