How to avoid toggling on “embedded” HTML elements?

[dodgyphil]

I have the following HTML-Java code:\[code\]<div id="div_id" style="cursor: pointer;"> <a id="a_id" href="http://stackoverflow.com/questions/12772159/...">...</a> <script type="text/javascript"> $('#a_id').click(function(event) { event.preventDefault(); alert('...'); }); </script></div><div id="details_id" style="display: none;"> Some text to be displayed! <script type="text/javascript"> $('#div_id').click(function(event) { event.preventDefault(); $('#details_id').toggle(); }); </script></div>\[/code\]When (in my browser) I click on the HTML \[code\]div#div_id\[/code\] then it toggles the \[code\]div#details_id\[/code\]. However, the toggling happens also when I click on the HTML \[code\]a#a_id\[/code\]. I would like to implement the behavior so that when I click on the HTML \[code\]a#a_id\[/code\] it doesn't toggle the \[code\]div#details_id\[/code\].How can I make that?