title: Avoid double clicking when using jQuery to mark checkbox
body: <p>I am trying to allow clicking on a div that contains a checkbox to cause that checkbox to be selected. Whenever the checkbox is selected, its parent div changes color. When unselected, the parent div's background color goes back to the original one.</p>
  
  <p><strong>Problem:</strong> The behavior when clicking on the checkbox's div is correct. However, when clicking on the checkbox directly, the behavior is opposite of what is desired. I suspect this is due to double clicking: The checkbox's own click handler fires, as well as the click handler for its parent div. I may be wrong here. How can I fix it?</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// Click checkbox when its container is clicked
  $(".organizer_listing_checkbox_container_container").click(function(event) {
      if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
      }
  });
  
  // Highlight row on selecting Checkbox
  $(".organizer_listing_checkbox").click(function() {
      if($(this).attr('checked')) {
          $(this).parent().parent().parent().css('background-color', "#FAFAFA");
      } else {
          $(this).parent().parent().parent().css('background-color', "#FFF");
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="organizer_listing"&gt;
  
      &lt;div class="organizer_listing_checkbox_container_container"&gt;
          &lt;div class="organizer_listing_checkbox_container" data-listing_id=1234&gt;
              &lt;input type="checkbox" class="organizer_listing_checkbox" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT: Swapped the background colors + e.stopPropagation()</strong></p>
  
  <pre><code>// Click checkbox when its container is clicked
  $(".organizer_listing_checkbox_container_container").click(function(event) {
      $(':checkbox', this).trigger('click');
  });
  
  // Highlight row on selecting Checkbox
  $(".organizer_listing_checkbox").click(function(e) {
      e.stopPropagation();
      if($(this).attr('checked')) {
          $(this).parent().parent().parent().css('background-color', "#FAFAFA");
      } else {
          $(this).parent().parent().parent().css('background-color', "#FFF");
      }
  });
  </code></pre>