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.

Answer 1

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