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

Posted 2023-05-09

【中文标题】在我无法控制的任何 AJAX 调用之后使用 JQuery 修改 DOM

【英文标题】：Modify DOM with JQuery after any AJAX Call over which I don't have control

【发布时间】：2011-11-24 09:38:47

【问题描述】：

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

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

我正在尝试在 Web 部件用于 cmets 的每个表数据标签中插入一个链接或一些文本，即

<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 注册。

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

【参考方案1】：

我肯定想知道比这更好的方法 - 您可以使用 setInterval 定期检查 DOM 中与您的选择器匹配且您尚未“处理”的元素并将您的链接添加到并将它们标记为“已处理”。不过我不会对性能非常乐观。

类似：

setInterval(processComments, 250);

//...

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

这是fiddle。

---

更新 根据这个jQuery forum thread，liveQuery 插件显然可以让您指定在将新元素添加到 DOM 时将执行的函数（如果我理解正确的话，使用 jQuery 的 DOM 操作方法）。

【参考方案2】：

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

【参考方案3】：

我遇到了同样的问题，我可以像这样使用实时功能

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