Question

I have few elements checkbox, img and another div inside a parent div. When I click parent div all three elements will be selected with some background color. This is how the html looks:

<div class="jfmfs-friend" id="812290706"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/picture"><div class="friend-name">Test user</div></div>

and inside parent div selection I am checking or unchecking checkbox

elem.delegate(".jfmfs-friend", 'click', function(event) {
$(this).find('input').attr('checked', !$(this).find('input').attr('checked'));
});

Everything works just fine. But the problem is that when I click only the checkbox it goes through function above and unchecks the checkbox. Now checkbox is unchecked but the whole parent div is selected.

How would I make sure that if checkbox is clicked I should not run this line?

 $(this).find('input').attr('checked', !$(this).find('input').attr('checked'));

Answer 1

Check if the checkbox or another element was clicked by checking the event targets type or tagname :

elem.on('click', '.jfmfs-friend', function(e) {
    if (e.target.tagName.toLowerCase() != 'input')
        $(this).find('input') 
               .prop('checked', !$(this).find('input').prop('checked'));
});