Drupal jQuery click event being called three times per click

I have been trying to figure out why this jQuery script calls the click bind event three times for every one actual click on the '.day-available' element. This is a calendar that updates a <div> next to the calendar.

Everything works fine, but I see in Firebug tha开发者_StackOverflow社区t each ajax url call is being executed three times. I have found information about using something like $(this).unbind, but I need to be able to allow the user to go back to a date on the calendar that they had clicked on previously.

The number of calls doesn't change between the first click and subsequent clicks.

Drupal.behaviors.uc_deliveries_now = function(context) {  
 $('.day-available').click(function(){
     $('.day-available').removeClass('selected-day');
     $(this).addClass('selected-day');

     var selected_day = $(this).html();
     var m_names = new Array("January", "February", "March","April", "May", "June", "July", "August", "September", "October", "November", "December");
     var d = new Date();
     var current_day = d.getDate();
     var current_month = d.getMonth();
     var current_year = d.getFullYear();

     if (selected_day < current_day) {
       // Move to next month
       current_month += 1;
     }

     $month_string = m_names[current_month];

     $.ajax({
       url: Drupal.settings.basePath + 'delivery_windows/' + $month_string.toLowerCase() + '/' + selected_day,
       success: function(data) {
         $('#time-selection').html(data);
       }
     });
   });
};

This is the only thing in the javascript file, there is no other bindings or anything else that could conflict with this. The whole javascript file is pasted above. I just cannot figure out why this is happening.

Here is a row sample from the calendar HTML:

<tr>
  <td>24</td>
  <td class="day-available">25</td>
  <td>26</td>
  <td class="day-available selected-day">27</td>
  <td>28</td>
  <td class="day-available">29</td>
  <td>30</td>
</tr>

Any help would be greatly appreciated.

try this

 $('.day-available').unbind()

before binding click event.

add return false; to the end of the click handler.

This is handy

jQuery(this,context).bind('click',function(){
  for (var property in context){
    if(property=='outerHTML'){

See here for more information. jQuery ready function is called twice

And unbinding is not helping, also returning false is not the fix in most cases i've seen. Try and see what happens if you comment out your ready function, or not bind it to the div.

(just adding this for all people that bounce into this issue) (and this sounds like a duplicate)