Question

我正在尝试使用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/。

所以，我的问题是为什么它不能用于铬。

Answer 1

您正在$("#options")中选择test.js，<script>在构建<body>之前在$(document).ready(function() { // contents of test.js });标记中定义。 jQuery有一个等待所有内容构造的函数，以便您可以选择元素：

{{1}}

Answer 2

您是否已将更改功能置于文档中（准备好了）？

试试这个

alert("outside function");

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

Answer 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);
  });
});

Answer 4

将您的代码放入$（document）.ready（）

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

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

Answer 5

我怀疑原因可能是这样：

当您在html文件中执行<script src="test.js"></script>时，尚未定义options选择标记，因此onchange函数未正确注册。因此，在定义select标记后尝试。

或选择$(document).ready(function(){})，即可获得所需的结果。

Answer 6

使用此代码工作，请务必在

后写

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

jQuery：事件监听器没有被触发

6 个答案: