javascript - Click()jQuery函数在简单的div上不起作用

我试图让一个简单的click（）方法在单击某个div时工作。我已经查看了许多线程，但还没有找到解决方案。这是我的jQuery代码：

var $Chart = $('#Chart');
var $TopBlock = $('#TopBlock');

$Chart.hover(function() {
    //Top Block
    $TopBlock.hover(function() {
        $(this).fadeTo('fast', 1);
        $MiddleBlock.fadeTo('fast', .5);
        $BottomBlock.fadeTo('fast', .5);
    });

    $TopBlock.click(function() {
        alert("click handler called");
    });
});

以及相关的HTML代码：

<div id = "Chart">
<div class = "Block" id = "TopBlock">
        <div class = "Group" id= "Capstone">
            <p>Capstone</p>
        </div>
        <!-- Capstone -->
        <div class = "Competency" id = "CapstoneComp">

        </div>
        <!--Expansion-->
        <div class = "Expand" id= "CapstoneExpand">

        </div>
    </div>
</div>

我包含了top hover函数，因为它可以独立工作。但是，当我添加click函数时，一切都会中断，包括hover函数。我试着将click函数移到$TopBlock悬停之外，但所有东西也都坏了。这应该是一个简单的点击功能，我真的不知道为什么这不起作用。
编辑：很抱歉没有相关资料。第一次张贴在这里。问题是，当我单击$TopBlock div时，click（）函数没有启动。它应该会触发一些javascript代码，这些代码会增加我的扩展div的维度，但我只希望首先弹出警报，以确保其正常工作。

最佳答案

采取：

$TopBlock.click(function() {
    alert("click handler called");
});

退出$Chart.hover...事件。另外，从$TopBlock.hover...事件中去掉$Chart.hover...。
所以你的代码是：

var $Chart = $('#Chart');
var $TopBlock = $('#TopBlock');

//Top Block
$TopBlock.hover(function() {
    $(this).fadeTo('fast', 1);
    $MiddleBlock.fadeTo('fast', .5);
    $BottomBlock.fadeTo('fast', .5);
});

$TopBlock.click(function() {
    alert("click handler called");
});

见Fiddle Example