JS script running for every element, rather than simple clicked element

Question

using jQuery, I am trying to get an action assigned to a button on a form. I have 50 of these forms on a page, but every time I click one link, the form action is run 50 time!!

I ran this to check, and it comes to exactly 50

  `i=1
      $('.thumbs').click(function(){
        console.log(i,"Click Count");
        i++;
)};

this has the unhelpful effect of running the AJAX fifty times!!

am I using selectors wrong?

EDIT: full script here

EDIT: Example of one element - There are 50 of these inside a container div.

Answer 1

Are you adding the listener to a submit button? Make sure to return true or false if the form should be submitted or not.

Answer 2

it sounds like it could be one of there two: 1) you've added 50 click listners to one button: you could try this by adding:

$('.thumbs').unbind();

before you assign a new handler.

If this is the case, you should try to find out why and make sure you only add one.

2) the button default action is the problem:

stop default behavior:

$('.thumbs').click(function(event){
event.preventDefault();