Modify DOM with JQuery after any AJAX Call over which I don't have control

I'm working with SharePoint 2010, one of the aspx pages contains a Note Board web part which provides simple functionality to leave a comment on a given page.

When the page is loaded the comments are retrieved by that web part using AJAX, I DO NOT have control over when that AJAX call is complete.

I'm trying to insert a link or some text within each of the table data tags that the web part uses for the comments i.e.

<td class="socialcomment">Comment 1</td> 
<td class="socialcomment">Comment 2</td>
<td class="socialcomment">Comment 3</td>

to

<td class="socialcomment">Comment 1 <a href="#">Report inappropiate</a></td> 
<td class="socialcomment">Comment 2 <a href="#">Report inappropiate</a></td>
<td class="socialcomment">Comment 3 <a href="#">Report inappropiate</a></td>

using JQuery like this

$('td.socialcomment').append(' <a href="#">Report inappropiate</a>');

I haven't been able to use the live() function of JQuery in the above scenario (worked for other scenarios I have), but I think that is because it was designed开发者_开发技巧 for events. I have also tried the .ajaxComplete() but it hasn't worked out at all I believe because I don't have control of the Ajax call or the Ajax call that SharePoint performs is not registered with JQuery.

Any help or insight is much appreciated. Thanks in advance!

I'd definitely like to learn of a better way than this - you could use setInterval to periodically check for elements in the DOM that match your selector and which you haven't already 'processed' and add your link to them and mark them as 'processed'. I wouldn't be very optimistic about the performance though.

Something like:

setInterval(processComments, 250);

//...

function processComments() {
     $('td.socialcomment:not(.processed)').append(' <a href="#">Report inappropiate</a>').addClass('processed');
}

Here's a fiddle.

Update
According to this jQuery forum thread, the liveQuery plugin apparently can let you specify functions that will be executed when new elements are added to the DOM (using jQuery's DOM manipulation methods, if I understand correctly).

If the ajax calls in Sharepoint are made using jQuery's ajax framework, then you can register a global ajaxComplete handler that will get called when any ajax call is completed. This only works for ajax calls made using jQuery though.

I was facing the same problem and i was able to make use of the live function like this

  $(window).load(function() {
    $('span.socialcomment-username').find("a").live({ 
       click: function() { 
         alert("asd");
       }, 
       mouseover: function() { 
         $(this).removeAttr('href'); 
         $(this).removeAttr('onclick'); 
       },
       mouseout: function() { 
         $(this).removeClass("over"); 
       } 
     });
  });