CODEWITHSUNDEEP
javascriptjqueryfunctionhtmlclick
Tim
Tim

Reputation: 741

Click() jQuery function not working on a simple div

I'm trying to get a simple click() method to work when clicking on a certain div. I've looked at numerous threads but haven't been able to find a solution. Here's my jQuery code:

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");
    });
});

And relevant HTML code:

<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>

I included the top hover function because it works on its own. However, when I add in the click function, everything breaks, including the hover function. I tried moving the click function outside of the $TopBlock hover, but everything broke also. It should be a simple click function here, I really don't know why this isn't working.

EDIT: Sorry for the lack of relevant material. First time poster here. The problem is that the click() function is not firing when I click on my $TopBlock div. It is supposed to trigger some JavaScript code that will increase the dimensions of my #Expansion div, but I just want the alert to pop up first to ensure that its working.

Upvotes: 2

Views: 8767

Answers (1)

FastTrack
FastTrack

Reputation: 8980

Take the:

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

out of the $Chart.hover... event. Also, take the $TopBlock.hover... out of the $Chart.hover... event.

So your code would be:

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");
});

See Fiddle Example

Upvotes: 2

Related Questions