Clickable element in clickable element executes function twice

Clickable element in clickable element executes function twice

Hello everyone,

I'm having a button inside a div like this:
  1. <div id="myDiv">Information here <button id="myButton">More</button></div>
  2. <span id="mySpan">even more information here</span>
Now I want to slideToggle() a span by clicking either on the button or the whole div. I'm doing this using the following code:
  1. $(document).on("click", "#myDiv, #myButton", function(){
  2.       // slideToggle-stuff here
  3. });
The problem is, that when the user clicks on the div, everything works as expected and the span gets toggled. But when the user clicks on the button, he - of course - also clicks on the div, causing jQuery to open and instantly close the span again, so actually it doesn't do anything.

Has anybody else experienced such a problem yet and knows how to deal with it?

Many thanks in advance