title: jQuery click event triggered multiple times off one click
body: <p>I am having trouble with multiple clicks being registered in jQuery when only one element has been clicked. I have read some other threads on <a href="https://stackoverflow.com/questions/2024389/jquery-click-event-is-firing-multiple-times-when-using-class-selector">Stack Overflow</a> to try and work it out but I reckon it is the code I have written. The HTML code is not valid, but that is caused by some HTML 5 and the use of YouTube embed code. Nothing that affects the click.</p>
  
  <p>The jQuery, triggered on document.ready</p>
  
  <pre><code>function setupHorzNav(portalWidth) {
      $('.next, .prev').each(function() {
          $(this).click(function(e) {
              var target = $(this).attr('href');
              initiateScroll(target);
              console.log("click!");
              e.stopPropagation();
              e.preventDefault();
              return false;
          });
      });
  
      function initiateScroll(target) {
          var position = $(target).offset();
          $('html, body').animate({
              scrollLeft: position.left
          }, 500);
      }
  }
  </code></pre>
  
  <p>Example HTML</p>
  
  <pre><code>&lt;nav class="prev-next"&gt;
      &lt;a href="#countdown-wrapper" class="prev"&gt;Prev&lt;/a&gt;
      &lt;a href="#signup-wrapper" class="next"&gt;Next&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>In Firefox one click can log a "Click!" 16 times! Chrome only sees one, but both browsers have shown problems with the above code.</p>
  
  <p>Have I written the code wrongly or is there a bug?</p>
  
  <p>-- Some extra info ------------------------------------------</p>
  
  <p>setupHorzNav is called by another function in my code. I have tested this and have confirmed it is only called once on initial load.</p>
  
  <pre><code>if ( portalWidth &gt;= 1248 ) {
      wrapperWidth = newWidth * 4;
      setupHorzNav(newWidth);
  }
  else
  {
      wrapperWidth = '100%';
  }
  </code></pre>
  
  <p>There are mutiple instances of nav 'prev-next'. All target different anchors. All are within the same html page.</p>
  
  <pre><code>&lt;nav class="prev-next"&gt;
      &lt;a href="#video-wrapper" class="prev"&gt;Prev&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>