Question

I have the following HTML-Java code:

<div id="div_id" style="cursor: pointer;">
  <a id="a_id" href="...">...</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>

When (in my browser) I click on the HTML div#div_id then it toggles the div#details_id. However, the toggling happens also when I click on the HTML a#a_id. I would like to implement the behavior so that when I click on the HTML a#a_id it doesn’t toggle the div#details_id.

How can I make that?

Answer 1

To stop the click event from triggering both handlers, stop the event bubbling on the a element:

event.preventDefault();
event.stopPropagation();

Or more concisely:

// Your code

return false;

Demo: http://jsfiddle.net/jfzU2/2/