Avoid double clicking when using jQuery to mark checkbox

Question

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.

Problem: 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?

JS

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

HTML

<div class="organizer_listing">

    <div class="organizer_listing_checkbox_container_container">
        <div class="organizer_listing_checkbox_container" data-listing_id=1234>
            <input type="checkbox" class="organizer_listing_checkbox" />
        </div>
    </div>

</div>

EDIT: Swapped the background colors + e.stopPropagation()

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

Answer 1

You might want to try using a label and then use a change handler on the check box. Clicking on a label associated with a checkbox is functionally the same as clicking on the checkbox. By using a change handler, you process all the events where the value of the checkbox changes.

<style>
   .organizer_listing_checkbox_container {
       display: block;
   }
</style>

<script type="text/javascript">
   $(function() {
       $(".organizer_listing_checkbox").on('change',function() {
           if ($(this).attr('checked')) {
               $(this).parent().parent().parent().css('background-color', "#FAFAFA");
           } else {
               $(this).parent().parent().parent().css('background-color', "#FFF");
           }
       });
    });
</style>

<div class="organizer_listing">

    <div class="organizer_listing_checkbox_container_container">
        <label class="organizer_listing_checkbox_container" for="listing_checkbox_0" data-listing_id=1234>
            <input id="listing_checkbox_0" type="checkbox" class="organizer_listing_checkbox" />
        </label>
    </div>

</div>