Databases
StackOverflow2013
Postsdbo
POjQuery click event triggered multiple times off one click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery click event triggered multiple times off one click
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USfreeMagee
    1. USfreeMagee
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. This table or related slice is empty.
      1. VTDownMod
    1. COCan you post where you're calling `setupHorzNav` from and the code surrounding `<nav class="prev-next">`?
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. USMichael Marr
    2. COWell just a few suggestions. You don't need to use `each` in this scenario, just use: `$('.next, .prev').click(function (e) { //... });`. And you don't need to use all three of `e.stopPropagation();`, `e.preventDefault();` and `return false;`. `return false;` automatically does the `preventDefault` and `stopPropagation`. Those are useful if you _only_ want to do one of them, or want to execute it sooner than `return false` because of possible problems in your code
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. USIan
    3. COAlso, it is better to *define* your event handler function outside a loop (such as each in your case), to make sure you do not have multiple instances of the same function in memory.
      singulars
      1. POjQuery click event triggered multiple times off one click
      1. UStechfoobar
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload