0

Jquery を使用して html 要素にイベント リスナーを追加しようとしています。

test.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="test.js"></script>

  <body>
      <select id="options" >                                                                                                                   
         <option value="volvo">Volvo</option>                                                                                                  
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
         <option value="audi">Audi</option>
      </select>
  </body>

test.js

alert("outside function");
$('#options').change(function() {

    alert("inside function");
    var x = $('#options option:selected').text();
    alert(x);
});

開いたときにfile:///home/ronnie/check/popup.htmlオプションのいずれかを選択すると、jquery 関数がトリガーされず、outside functionポップアップが表示されます。

jsfiddle で同じコードを試してみましたが、http://jsfiddle.net/Vj9LK/でまったく問題なく動作します。

だから、私の質問は、なぜそれがクロムで機能しないのかということです。

4

6 に答える 6

4

が構築される前にタグで定義されている を選択$("#options")しています。jQuery には、要素を選択できるように、すべてが構築されるまで待機する機能があります。test.js<script><body>

$(document).ready(function() {
  // contents of test.js
});
于 2012-12-29T11:15:08.097 に答える
3

ドキュメント内に変更機能を入れましたか（準備完了）？

これを試して

alert("outside function");

$(document).ready(function(){
    $('#options').change(function() {
        alert("inside function");
        var x = $('#options option:selected').text();
        alert(x);
    });
});
于 2012-12-29T11:15:13.947 に答える
3

DOM はまだロードされていません。関数を使用する必要があり.readyます - http://api.jquery.com/ready/

alert("outside function");
$(function(){
  $('#options').change(function() {

    alert("inside function");
    var x = $('#options option:selected').text();
    alert(x);
  });
});
于 2012-12-29T11:15:29.597 に答える
2

コードを $(document).read() に入れます

$(document).ready(function(){
    alert("outside function");
    $('#options').change(function() {

        alert("inside function");
        var x = $('#options option:selected').text();
        alert(x);
    });
})
于 2012-12-29T11:15:49.037 に答える
1

理由は次のとおりだと思います。

<script src="test.js"></script>HTML ファイルで行う場合options、まだ select タグを定義していないため、onchange 関数が正しく登録されていません。selectタグを定義してから試してみてください。

または$(document).ready(function(){})、希望する結果が得られるものを選択します。

于 2012-12-29T11:15:33.543 に答える
0

このコードを使用してください。必ず後で書いてください。

    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>

     <select id="options" >                                                                                                                   
             <option value="volvo">Volvo</option>                                                                                                  
             <option value="saab">Saab</option>
             <option value="mercedes">Mercedes</option>
             <option value="audi">Audi</option>
          </select>
     <script>
       $('#options').change(function() {

        alert("inside function");
        var x = $('#options option:selected').text();
        alert(x);
    });
    </script>
    </body>
    </html>
于 2012-12-29T12:06:15.237 に答える