我遇到的问题是页面加载速度如此之快,以至于jquery在后续脚本调用之前尚未完成加载.有没有办法检查jquery的存在,如果它不存在,请稍等片刻,然后再试一次？
在回答下面的答案/评论时,我发布了一些标记.
情况...... asp.net主页和子页面.
在母版页中,我引用了jquery.然后在内容页面中,我引用了特定于页面的脚本.当加载特定于页面的脚本时,它会抱怨"$ is undefined".
我在标记的几个点放置警报,以查看触发事件的顺序,并确认它按此顺序触发:
这是主页顶部的标记:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Reporting Portal</title>
<link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/red/red.css" rel="stylesheet" type="text/css" />
<script type="text/Scripts" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/Scripts" language="javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/Scripts" language="javascript" src="../Scripts/facebox.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
然后在母版页的正文中,还有一个额外的ContentPlaceHolder:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
在子页面中,它看起来像这样:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Data.Dashboard" %>
<%@ …如何检查页面上是否加载了bootstrap.js(文件bootstrap.js可能被编译成另一个大的JS文件)？
我使用以下命令将jQuery库附加到dom:
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
但是,当我跑:
jQuery(document).ready(function(){...
控制台报告错误:
Uncaught ReferenceError: jQuery is not defined
如何动态加载jQuery以及在dom中使用它？
在我的网站上,我正在异步加载jQuery.
为了做到这一点,我必须在真正加载之后才运行jQuery函数.
我尝试了两种纯JS方式:
<script src="js/jquery-2.2.2.min.js" async></script>
<script>
window.addEventListener('load', function() {
//stuff
}, true);
</script>
和
window.onload = function() {
//stuff
}
但即便如此,我仍然得到 Uncaught TypeError: $(...) is not a function at...
在lib完全加载后如何触发jQuery函数？
我想$.fn.modal在Bootstrap/jQuery中进行扩展,这样我的扩展版本可以在通过传递额外选项初始化模态之前"做事".我试过这个,就像我做一些时间来扩展jQuery原型:
var modal = $.fn.modal;
$.fn.modal = function() {
this.each(function() {
// do stuff
});
modal.apply(this, arguments);
}
$('#modal').modal(); // fails
上面的例子不起作用,虽然相同的模式适用于许多其他非bootstrap jQuery原型.
这是一个演示它的小提琴:http://jsfiddle.net/eTWSb/(只是评论覆盖的东西,看它工作).
当你想要添加自定义功能时,我的印象是克隆一个函数然后将其称为"超级"是一个可行的选择.
有什么建议？
我在其中一个视图的末尾有以下代码：
@section Scripts {
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
}
无论我做什么，我都不能让它着火。我已经检查并进一步包含 JQuery 代码。使用这里的建议，我将代码更改为以下内容以确认 jquery 已正确加载。这给出了“是的！” 加载页面时发出警报。
@section Scripts {
<script type="text/JavaScript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
}
我页面中源代码的结尾如下所示：
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/breakpoints.js"></script>
<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>
<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>
<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>
<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="/Plugins/bootstrap-select2/select2.js"></script>
<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/Plugins/dropzone/dropzone.js"></script>
<script src="/Scripts/core.js"></script> …