Click() jQuery function not working on a simple div

Question

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.

So we'd quite like to see your relevant (minimal/SSCCE) HTML. Also, the JavaScript that assigns/creates those variables you're using. Also, what's not working, and what is it supposed to do, other than generate an alert? — David Thomas
– David Thomas, Commented Dec 16, 2013 at 19:22
We have no idea via your example what $TopBlock is, or what it has been set to. — Mark
– Mark, Commented Dec 16, 2013 at 19:25
Sorry about the lack of relevant material @DavidThomas, I have made edits that should give you more information. — Tim
– Tim, Commented Dec 16, 2013 at 19:32
Did you make sure that you hovered over chart before you attempted to click top block? Binding events inside of other events that may be triggered more than once is generally a bad idea. — user400654
– user400654, Commented Dec 16, 2013 at 19:32
I would suggest taking it out of the hover. Unless you hover over the chart element you will never make the binding for the click. Also are you certain this code is either in an onload handler or placed after the chart and TopBlock elements are rendered on the screen? If not then the bindings will also not happen. — scrappedcola
– scrappedcola, Commented Dec 16, 2013 at 19:35

FastTrack · Accepted Answer · 2013-12-16 19:38:28Z

2

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

edited Dec 16, 2013 at 19:38

answered Dec 16, 2013 at 19:32

FastTrack

9,02014 gold badges60 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

devinallenaz Over a year ago

Also the $TopBlock.hover. You probably don't want to be assigning event handlers inside an event handler. They will be added repeatedly whenever the outer event is triggered.

Tim Over a year ago

It works! I thought I had done this earlier and it wasn't triggering, but I guess something went right this time. Many thanks! Also good to know that nesting event handlers isn't the best idea.

FastTrack Over a year ago

@user3108571 You are welcome! you'll learn a lot on this site ;-)

Collectives™ on Stack Overflow

Click() jQuery function not working on a simple div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related