jquery click events being stacked and executed

Question

using the following code (in drupal)

    ( function ($) {
  Drupal.behaviors.auction_house = {
    attach: function(context,settings) {

      $(document).ready(function(){
        // buy item animation
        $(".buy_item_button").click(function() {
          $(".slide_bags").fadeOut(222).fadeIn(222);
          return false;
        });
        // datagrid
        $('#auction_house_table').dataTable();   
      });

    }
  };
})(jQuery);

if I click, the event is fired, if I click another time, the event is fired 2 times, then 3 times, then 4 times and so on. So let's call this 'being stacked'. Important information: the content containing the link were the onclick function is attached to, is loaded through ajax.

How can this happen and how can I prevent this?

Answer 1

I guess you are binding the 'click' event multiple times (when the ajax content is loaded or so). You can either unbind the event before binding it again or check if the event is already bound before re-binding:

Unbind before binding the event:

$(".buy_item_button").unbind('click').click(function() {
    //your code...
});

Additionally, see this link for checking if an event is already bound to an element.

But I think the best approach would be to bind the click event only to the latest added content. So, instead of binding the event directly to the .buy_item_button selector; you can select the new content and find the children with .buy_item_button class:

$("#new-content").find(".buy_item_button").click(function() {
    //your code...
});