Hi

I have an Ajax post that gets 100 records. That runs a callback function called Update(data.d) that loops through and populates a Div container with these records each in their own Div with numbered IDs. (It also removes old Divs so that there are never more than 100 in the container. During this loop I register the click event for each <a> called 'Like':

1. 
   
     $("#" + items.id + " .vLike").click(function () {
         if (this.innerHTML == "Processing') return;
         SendLike(items.id);
         this.innerHTML = 'Processing';
         return false;
     })
   
   
   
   
   

SendLike() sends an Ajax request to the server to make a data change and then returns the same 100 records. The Ajax callback is the exact same Update function as before so it's looping through and registering the click functions again.

Heres the problem:

It works great for the first item but then stops working after the ajax post. I've read up on the FAQ regarding AJAX and events but I don't understand why it's happening in this instance if I'm reloading the same items and rebinding them. IF I remove all the items in the line before SendLike() using something like:

Then it works. Can someone explain what is going on?

As an aside, I tried just adding extra items with AJAX rather than refreshing the old 100. I assumed that this would at the very least keep the click event bound on the existing items, but again, after the first instance it stops functioning even for items already in the container that haven't changed.