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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/960143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:14:39  来源:igfitidea点击:

How to use jquery correctly in SharePoint Web Part - jquery doesn't always fire

jquerysharepointweb-parts

提问by Devubha Manek

I'm learning how to use jquery with SharePoint. My example draws a red box inside the Content Editor Web Part when a link is selected. My code works when the SharePoint page is in edit mode but not after I've left the page and returned in non edit mode. The jquery function does not fire for some reason... I'm missing something simple but not sure what.

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

Thanks for any help.

谢谢你的帮助。

Kevin

凯文

My master page for the site connects to the jquery-1.3.2.min.js file this way:

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

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

My Content Editor Web Part code looks like this:

我的内容编辑器 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 />

采纳答案by Alex Angas

Check the rendered HTML for the ScriptLink control and see if you can browse to the location given by the <script> tag. This should give you some ideas about what's going wrong.

检查为 ScriptLink 控件呈现的 HTML,看看您是否可以浏览到 <script> 标记指定的位置。这应该会给你一些关于出了什么问题的想法。

Also, have a look at this questionwhich contains options for adding jQuery to SharePoint. (Disclaimer: one of the answers is mine and the method I currently use.)

此外,请查看此问题,其中包含将 jQuery 添加到 SharePoint 的选项。(免责声明:答案之一是我的和我目前使用的方法。)

回答by Devubha Manek

Recently I have encountered with a problem I think it might help someone.

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

In SharePoint head tag if you place the script tag like

在 SharePoint 头标记中,如果您将脚本标记放置为

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

then jQuery is not working but if you place like

那么 jQuery 不工作,但如果你像

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

See the </script>difference then it's working.

看到</script>差异然后它正在工作。

I am surprised!

我很惊讶!

回答by Jeroen Ritmeijer

The main problem with JavaScript code not consistenly firing when a page is loaded is because the entire page may not have finished loading and therefore the internal DOM may not have been completely constructed yet.

JavaScript 代码在页面加载时没有持续触发的主要问题是因为整个页面可能尚未完成加载,因此内部 DOM 可能尚未完全构建。

The best way to fix this is to hook your code to the load or ready event.

解决此问题的最佳方法是将您的代码挂钩到 load 或 ready 事件。

For example

例如

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

For detailed examples on how to use this in SharePoint, see http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.htmland http://www.muhimbi.com/blog/2009/07/automatically-add-search-as-you-type-to.html

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

回答by Paul Stubbs

I think it is a timing issue. Try this. Add the LoadAfterUI="true"

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

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