Question

我正在尝试在单击某个div时使用简单的click（）方法。我看过很多线程，但一直无法找到解决方案。这是我的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>

我包含了顶级悬停功能，因为它可以自行运行。但是，当我添加click功能时，一切都会中断，包括悬停功能。我尝试在$ TopBlock悬停之外移动点击功能，但一切都破了。它应该是一个简单的点击功能，我真的不知道为什么这不起作用。

编辑：很抱歉缺少相关资料。这是第一次海报。问题是当我点击我的$ TopBlock div时，click（）函数没有触发。它应该触发一些javascript代码，这将增加我的#Expansion div的尺寸，但我只是想首先弹出警报以确保其工作。

Answer 1

采取：

$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

Click（）jQuery函数不适用于简单的div

1 个答案: