twitter-bootstrap 引导警报不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19491892/
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
bootstrap alert not working
提问by SpringLearner
I am trying to make an alert using bootstrap and its not wokring. In the mozilla firebug console its showing
我正在尝试使用引导程序发出警报，但它不工作。在 mozilla firebug 控制台中显示
ReferenceError: $ is not defined
$('#openAlert').click(function () {
The code is as follows.May i know what is missing.I am including jquery as well as bootstrap js files.
代码如下。我可以知道缺少什么吗。我包括 jquery 以及 bootstrap js 文件。
<head>
<title>Twilio Messages (Send message Example)</title>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h2>Twilio Messages (Send message Example)</h2>
<form class="form-signin" action="#Twilio" method="post">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<input type="text" name="toNumber" maxlength="10" placeholder="Enter 10 digits number to send" value="+16822037149"/>
</div>
<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The number to send an SMS to. This field accepts formatted and unformatted US numbers, e.g. +14155551212, (415) 555-1212 or 415-555-1212.<hr />
To send message from SandBox Account. The Number has to be <a href="https://www.twilio.com/user/account/phone-numbers/verified" target="_blank">verified</a>
</div>
</div>
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3">
<textarea name="body" maxlength="160" placeholder="Enter message to send">
</textarea>
</div>
<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert">Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Alert title</h4>
<p>Roses are red, violets are blue...</p>
</div>
</div>
<script type="text/javascript">
$('#openAlert').click(function () {
$('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});
</script>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
</html>
回答by Dhaval Marthak
Include your scripts to <head></head>and then use alert()or whatever you library call you are making,
包括您的脚本<head></head>，然后使用alert()或您正在制作的库调用的任何内容，
As you are calling the library functions before loading library
当您在加载库之前调用库函数时
$('#openAlert').click(function () {
$('#le-alert').addClass('in'); //
.................
should be *after*
应该在 *之后*
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
Remember:You need to include JS library first and then you can use the functions as $ is to be initialized
请记住：您需要先包含 JS 库，然后才能使用这些函数，因为 $ 将被初始化
回答by Ravimallya
This should work:
这应该有效：
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Alert title</h4>
<p>Roses are red, violets are blue...</p>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script type="text/javascript">
$('#openAlert').click(function () {
$('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});
</script>
</body>
</html>
Please make sure to include jquery before calling any jquery dependencies and custom functions based on jquery.
在调用任何基于 jquery 的 jquery 依赖项和自定义函数之前，请确保包含 jquery。
回答by Dipak Ingole
- Make sure you imported
jQuery pluginin your code - Make sure
jQuery pluginis loaded before using(wrapping insidedocument handler function).
- 确保您
jQuery plugin在代码中导入 - 确保
jQuery plugin在使用前加载（包裹在里面document handler function）。
The simplest check to verify jQueryis loaded or not is
验证jQuery是否加载的最简单检查是
if (typeof jQuery != 'undefined') {
// do operation's here
}
Or
或者
if (window.jQuery) {
// jQuery is available.
}
DEMO
演示
回答by Chris Pickford
You need to include a script reference to jQuery.
您需要包含对 jQuery 的脚本引用。
<script src="scripts/jquery.js">
回答by dr.dimitru
You forget the jQuery add to head before bootstrap.js:
你忘记了 jQuery 在 bootstrap.js 之前添加到头部：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
回答by pixelmatt
Your reference to the jQuery file needs to be placed just before your script that uses the $ function.
您对 jQuery 文件的引用需要放在使用 $ 函数的脚本之前。
You have got it nearly right by placing all your js at the bottom.
通过将所有 js 放在底部，您几乎就对了。
But you need to make sure that the jQuery file is referenced before anything else that is going to try and use it.
但是您需要确保在尝试使用它的任何其他内容之前引用 jQuery 文件。
