jQuery click event triggered multiple times off one click <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="http://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>