Question

I have a <div> which contains a few links (<a> tags) and other elements in it. I want to have the <div> behave like a button, which means whenever the user clicks on every part of it, it should navigate to some link. There are a few solutions like this one:
Make a div into a link I can make it work with jQuery too, however, the problem is that I want the <a> tags in the <div> to work like before. I couldn’t find any solution which makes this possible. How can I do this?

Answer 1

$('#mydiv a').click(function(e) {
  e.stopPropagation();
});

Events bubble up, that’s what they do. This is called propagation. Calling stopPropagation on the jQuery event object should prevent that event from bubbling up to your div that contains it.

jQuery Docs here

And since the event handler does not return false, then the browser default click handling for <a> tags will still be fired, which means the href is followed as normal.

Check out a working example here: http://jsfiddle.net/Squeegy/2phtM/