-1

ブートストラップを使用してアラートを作成しようとしていますが、機能していません。mozilla firebug コンソールでその表示

ReferenceError: $ is not defined


$('#openAlert').click(function () {

コードは次のとおりです。不足しているものがわかります。jquery とブートストラップ 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">&times;</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">&times;</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">&times;</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>
4

6 に答える 6

3

スクリプトを含めてから<head></head>使用するalert()か、作成しているライブラリ呼び出しを何でも使用します。

ライブラリをロードする前にライブラリ関数を呼び出しているため

$('#openAlert').click(function () {
      $('#le-alert').addClass('in'); //
.................

* の後に*する必要があります 

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

覚えておいてください： 最初にJSライブラリを含める必要があります。その後、$が初期化されるため、関数を使用できます

于 2013-10-21T10:25:10.207 に答える
2

This should work:

<div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</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.

于 2013-10-21T10:29:49.273 に答える
1

jQuery へのスクリプト参照を含める必要があります。

<script src="scripts/jquery.js">
于 2013-10-21T10:24:03.870 に答える
1

bootstrap.js の前に jQuery を head に追加するのを忘れています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-10-21T10:24:12.073 に答える
1
  1. jQuery pluginコードにインポートしたことを確認してください
  2. jQuery plugin使用する前に がロードされていることを確認してください( 内でラップdocument handler function)。

jQueryロードされているかどうかを確認する最も簡単なチェックは、

if (typeof jQuery != 'undefined') {  
    // do operation's here
}

または

if (window.jQuery) {
    // jQuery is available.
}

デモ

于 2013-10-21T10:28:49.777 に答える
0

jQuery ファイルへの参照は、$ 関数を使用するスクリプトの直前に配置する必要があります。

すべての js を一番下に配置することで、ほぼ正しくなります。

ただし、jQuery ファイルを使用しようとする他の何よりも先に、jQuery ファイルが参照されていることを確認する必要があります。

于 2013-10-21T10:25:21.403 に答える