title: How to bind event to element and all children but only ever trigger it once?
body: <p>This is what the HTML looks like:</p>
  
  <pre><code>&lt;a href="#" id="back-button" data-transition="slide" data-direction="reverse" data-role="button"&gt;
    &lt;div class="nav-item-desc"&gt;Back&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And here is how I bind a click event:</p>
  
  <pre><code>$("#back-button").contents().addBack().off().on("click", function(e)
  {
  });
  </code></pre>
  
  <p>Now, when I click on the div (right on the text), the event gets fired once and when I click on the link (beside the text on the button), it gets fired twice.</p>
  
  <p>How do I fix this?</p>