0

我正在尝试使用 Jquery 将事件侦听器添加到 html 元素。

测试.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>

测试.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")in ，它在构建之前在标签test.js中定义。jQuery 有一个功能可以等待所有内容都构造好，以便您可以选择元素：<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).ready()

$(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 文件中执行此操作时，您尚未定义optionsselect 标记，因此 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 回答