Question

When I access <div> or <p> elements by class with jQuery for a click function, it repeats the event by how many elements are in the array or stack. So, if I have 3 <div> elements on top of each other or next to each other, the one on the bottom, or the one to the right, will go through the event once and the one on the top or the left will go through the event 3 times.

Am I doing something wrong? Or is this not meant to be done with jQuery?

[revision]
sorry if i worded this in a confusing way. here is a link… you will better understand my problem there. just add a couple new elements via the form and click on them.

http://jsfiddle.net/rNj6e/

Answer 1

Now that you’ve posted a fiddle showing the problem, I can actually answer. The problem is that you bind the click event handler to .dp inside the click event handler bound to #add. So what happens is this:

1. You fill in the form and click #add, which creates a new element with class dp and appends it
2. It then binds a click event handler to every element with class dp (there’s only 1, the 1 we just added)
3. You fill in the form again, click #add, which repeats steps 1 and 2, so it binds another click event listener to the first .dp element, and binds one to the new element.
4. Repeat as necessary, binding more and more event handlers to the existing elements every time you click #add!

To fix this, you need to bind the event handler to .dp outside of the #add event handler. The problem is that you’re creating new .dp elements on the fly, so just using .click won’t bind to elements that are not in the DOM yet. To solve that, you can use delegate, which binds an event handler to elements matching the selector now and in the future:

$("#preview").delegate(".dp", "click", function(event){
    alert(this.id);
});

Here’s an updated fiddle.