CODEWITHSUNDEEP
jqueryhtmlcsscheckbox
Rob
Rob

Reputation: 738

Checkbox exclusion on DIV click

I have a simple div container, with a formatted <ul><li> inside to display contact information. When you click on the div it will take you to the page to show their profile. This is working fine.

However, is there a way I can make it so that the checkbox is still clickable? At the moment if you click the checkbox it acts as if I've clicked the parent div so will therefore redirect you away from the page. So, I would like it to work as it is, but with the ability to still be able to click on the checkbox

I have the following mock up, CodePen

HTML

<div class="contactlist" data-token="ABCDEF">
    <ul>
        <li><input type="checkbox"></li>
        <li><img src="" alt="..." height="50" width="50" /></li>
        <li><span>Mr A Sample</span></li>
    </ul>
</div>

JS 

$(".contactlist").on("click", function(e){

  var token = $(this).data('token');
  window.location.href = "contact.php?token="+token;

});

PS The window.location doesn't work in the CodePen example (they've disabled page redirects), but that normally works, and would redirect you.

Upvotes: 1

Views: 85

Answers (1)

John Strickler
John Strickler

Reputation: 25421

The event object has a target property which has a reference to the element of event origination (which element was actually clicked). So if the originating element is a checkbox, then you can skip the rest of the event logic, like so: 

// did not click on a checkbox
if(!$(e.target).is(':checkbox'))

Complete JS

$('.contactlist').on('click', function(e) {  
    if(!$(e.target).is(':checkbox')) {
      var token = $(this).data('token');
      window.location.href = 'contact.php?token=' + token;
    }
});

Upvotes: 1

Related Questions