CODEWITHSUNDEEP
javascriptjqueryhtml
Himmel
Himmel

Reputation: 3709

jQuery 'click' event not firing

I can't for the life of me figure out why this click function isn't working on this codepen. I know how to use jQuery's click method. If a second set of eyes could look at this and diagnose, it would much appreciated. Here is a fork of my codepen, the click method is up top and looks like this:

$('button').click(function() {
  alert('clicked!');
});

Here is the relevant HTML:

<section class="left">
  <button class="left-button">Show Chart</button>
</section>

Here is the codepen.

(I've used the exact same click method here and everything works fine)

Upvotes: 0

Views: 125

Answers (4)

pablito.aven
pablito.aven

Reputation: 1165

The problem is with <div class="chart-container">. When you click on the button, actually the click is being made to the container.

You can solve it by adding z-index:-5; to your .chart-container CSS style.

Upvotes: 0

john Smith
john Smith

Reputation: 17926

give the button an id and run from console $('#id').click() to check if it´s really not working, and it is working, the click is not triggered because some css generates overlying elements that get clicket instead

Upvotes: 0

Varun
Varun

Reputation: 1946

The buttons are hidden! under some element.

Upvotes: 0

Leeish
Leeish

Reputation: 5213

It's your CSS. I removed your CSS and it worked. Your buttons are blocked by stuff. They need to be in front to get clicked.

Your sections are set to z-index of -1.

Upvotes: 4

Related Questions