jQuery onClick fires twice

Published on 15 Jul 2016 , edited on 22 Mar 2019

While doing some extensive JavaScript and jQuery work, I came across a testing console.log that kept firing twice. The most obvious reason would be that the script was rendered or included twice in the body, but it wasn’t. It was something more deserving of a facepalm.

The element of the click function was a label. A label for a radiobutton. Whenever you click on a label for a radiobutton it pushes the selection to the radiobutton naturally. Apparently it also pushes all click actions of the label to the input-element.
Hence, any action (console.log) on the label for an input, will run again on the input.

The easiest solution would be to target the input, not the label. I thought this would pose a problem because the said input fields are hidden and the label is styled to be a button, but reverse-engineering these thoughts I figured that if the label-actions get’s pushed to the input, it might as well be the other way around.

And so it appears to be!

Snippets

Short notes and snippets as reminders for myself and my work.

All categories

All tags

All posts