如何在 SharePoint Web 部件中正确使用 jquery - jquery 并不总是触发答案

【问题标题】：How to use jquery correctly in SharePoint Web Part - jquery doesn't always fire如何在 SharePoint Web 部件中正确使用 jquery - jquery 并不总是触发
【发布时间】：2010-10-31 21:38:57
【问题描述】：

我正在学习如何将 jquery 与 SharePoint 一起使用。我的示例在选择链接时在内容编辑器 Web 部件内绘制了一个红色框。我的代码在 SharePoint 页面处于编辑模式时有效，但在我离开页面并以非编辑模式返回后无效。 jquery 函数由于某种原因没有触发......我错过了一些简单但不确定是什么。

感谢您的帮助。

凯文

我的站点母版页以这种方式连接到 jquery-1.3.2.min.js 文件：

 <SharePoint:ScriptLink language="javascript" name="jquery-1.3.2.min.js" 
 Defer="true" runat="server"/>

我的内容编辑器 Web 部件代码如下所示：

<style type="text/css">
#box
{
    background: red;
    width: 300px;
    height: 300px;
    display: none;
}
</style>


<script type ="text/javascript">
    $(function() {
        $('a').click(function() {
            $('#box').slideDown(2000);
        });
    })
</script>

<div id="box">
<h1>This is text in the box</h1>
</div>
<a href="#">Display Box</a><br />

【问题讨论】：

标签： jquery sharepoint web-parts

【解决方案1】：

最近我遇到了一个问题，我认为它可能会对某人有所帮助。

如果您将脚本标签放置在 SharePoint 头标签中

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/>

那么 jQuery 不工作，但如果你像这样放置

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

查看</script> 的区别然后它就可以工作了。

我很惊讶！

【讨论】：

【解决方案2】：

检查 ScriptLink 控件的呈现 HTML 并查看是否可以浏览到

另外，请查看 this question，其中包含将 jQuery 添加到 SharePoint 的选项。（免责声明：答案之一是我的和我目前使用的方法。）

【讨论】：

我最终使用“AdditionalPageHead Delegate Control”创建了一个“功能”。与我想象的完全不同，我需要这样做。我非常依赖这个网站：weblogs.asp.net/jan/archive/2008/11/20/…。有用！谢谢亚历克斯。

【解决方案3】：

页面加载时 JavaScript 代码不能一致触发的主要问题是，整个页面可能尚未完成加载，因此内部 DOM 可能尚未完全构建。

解决此问题的最佳方法是将代码挂钩到加载或就绪事件。

例如

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script language="javascript">
function doSomething()
{
  // Your code goes here
}

jQuery.event.add(window, "ready", doSomething);
</script>

有关如何在 SharePoint 中使用此功能的详细示例，请参阅 http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.html 和 http://www.muhimbi.com/blog/2009/07/automatically-add-search-as-you-type-to.html

【讨论】：

【解决方案4】：

我认为这是一个时间问题。尝试这个。添加 LoadAfterUI="true"

<SharePoint:ScriptLink ID="SPScriptLink" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js">
</SharePoint:ScriptLink>

【讨论】：