I am trying to set up a simple div container that displays contact information in a formatted list (<ul><li>). Clicking on the div currently takes you to the user's profile page, which is functioning correctly.
However, I am facing an issue where clicking on the checkbox inside the div also triggers the redirection to the profile page. Is there a way to make the checkbox still clickable without redirecting the user away from the current page?
You can see a mock-up of my design on CodePen: 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;
});
Just a note, the example on CodePen does not actually redirect (they have disabled it), but the code should normally work as described.