我正在努力做一些非常简单的事情。基本上我有一个可点击的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艺术=])

我有两个班级空着色.一旦我点击了彩色类,然后删除彩色类并添加空类.我再次点击它应该添加彩色类和remoce空类.但它没有用.

var color_click = false;
            var select_color = "";
            $( ".colored").on('click',function(e){
                if(color_click != true){
                    color_click = true;
                    select_color = $(this).css('background-color');
                    $(this).removeClass("colored");
                    $(this).addClass( "empty");
                    $(this).css('background-color','')
                }
            });


            $( ".empty").click(function(){
                if(color_click == true){
                    color_click = false;
                    $(this).css('background-color',select_color);
                    $(this).addClass("colored");
                    $(this).removeClass( "empty");

                }
            });

是.那是因为您将事件绑定到该特定类.您可以使用事件委派来使用 on()来解决问题.当您的事件绑定发生时,没有类.empty的元素,并且绑定无效.而不是使用文档头(在我的示例中使用)使用始终存在于DOM中的容器并保存此元素.因此,通过事件委派,您实际上将事件绑定到容器/文档头,以便对现在以及将来存在于DOM中的元素进行委派.

除此之外,我做了一些更改,以删除一些模糊的检查和使用链接.

$(document).on('click',".colored",function(e){
            if(!color_click){ // You dont need this check if your variable is modified only in these 2 events
                color_click = true;
                select_color = $(this).css('background-color');
                $(this).removeClass("colored").addClass( "empty").css('background-color','');

            }
        });


        $( document).on('click',".empty",function(){
            if(color_click){// You dont need this check if your variable is modified only in these 2 events
                color_click = false;
                $(this).addClass("colored").removeClass("empty").css('background-color',select_color);

            }
        });