在任何我无法控制的AJAX调用之后使用JQuery修改DOM

时间:2011-09-24 20:41:46

标签: jquery ajax sharepoint dom

我正在使用SharePoint 2010,其中一个aspx页面包含一个Note Board Web部件,它提供了在给定页面上发表评论的简单功能。

当页面加载时,该Web部件使用AJAX检索注释,我无法控制AJAX调用何时完成。

我正在尝试在网络部件用于评论的每个表格数据标签中插入一个链接或一些文字,例如

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

<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>

使用像这样的JQuery

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

我无法在上面的场景中使用JQuery的live()函数(适用于我所拥有的其他场景),但我认为这是因为它是为事件设计的。 我也尝试过.ajaxComplete(),但它完全没有用,我相信因为我无法控制Ajax调用或者SharePoint执行的Ajax调用没有在JQuery中注册。

非常感谢任何帮助或见解。 提前谢谢!

3 个答案:

答案 0 :(得分:0)

我肯定想了解一种比这更好的方法 - 您可以使用setInterval定期检查DOM中与您的选择器匹配的元素以及尚未“处理”的元素并添加您的链接到它们并将它们标记为“已处理”。不过,我对表现不会很乐观。

类似的东西:

setInterval(processComments, 250);

//...

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

这是fiddle


<强>更新
根据这个jQuery forum threadliveQuery插件显然可以让你指定在将新元素添加到DOM时将执行的函数(如果我理解正确的话,使用jQuery的DOM操作方法)。

答案 1 :(得分:0)

如果使用jQuery的ajax框架在Sharepoint中调用ajax,那么你可以注册一个global ajaxComplete handler,当任何ajax调用完成时,它将被调用。这仅适用于使用jQuery进行的ajax调用。

答案 2 :(得分:0)

我遇到了同样的问题,我能够像这样使用实时功能

  $(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"); 
       } 
     });
  });