jQuery Click Function not Working?

Question

I have the following jQuery Function on a site:

$('#CAT_Custom_381715_0').click(function () {
   $(".grow").fadeIn("slow");
});

What I am aiming for is when a checkbox is clicked it will then show other parts of the form.

The HTML code is below:

<tr>
  <td><label>Have You Grown This Plant?</label><br />
      <input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>

<tr class="grow"> <!-- FORM CODE --> </tr>
<tr class="grow"> <!-- FORM CODE --> </tr>

CSS for .grow

.grow{
  display:none;
}

I assume has something to do with the table causing the issue. No errors are thrown. I originally had a div wrapping the code but Firefox would remove the div. Not sure if that was Firefox or my CMS.

The problem is the <tr> with the class of grow does not show when the checkbox is clicked.

How do I get jQuery to work properly.

What's the problem? When clicked, this is going to show both of the tr's if they're not already shown. You have no conditional in place to handle toggling, so that's to be expected. — Ohgodwhy
– Ohgodwhy, Commented Aug 18, 2013 at 0:59

Community · Accepted Answer · 2017-05-23 12:05:18Z

3

I switched the click behavior to on and it is toggling. However, I also recommend you read this post and make sure to check to see if your checkbox is actually checked, and not just clicked on.

Setting "checked" for a checkbox with jQuery?

Here is the Codepen link: http://cdpn.io/jztKb

HTML

<table>
  <tr>
    <td><label>Have You Grown This Plant?</label><br />
        <input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
  </tr>

  <tr class="grow"><td>Hi</td></tr>
  <tr class="grow"><td>Hi</td></tr>
</table>

CSS

.grow {
  display: none;
}

jQuery

$('#CAT_Custom_381715_0').on('click', function() {
   $(".grow").fadeToggle("slow");
});

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 18, 2013 at 1:10

kunalbhat

1,71910 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

jQuery Click Function not Working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related