Question

我有一个非常简单的页面，但它不起作用，我不明白为什么。

<head>
<script src='js/jquery-1.11.0.js'></script>

<script>
    $('#uno').change(function() {alert('ok');});
</script>
</head>

<body>
<form name='input' id='formgraph'>
<select id='uno' name='uno'>
<option value='1'>1</option>
<option value='2'>2</option>
</form>
</body>

因此，当我更改值时它应该提醒，但它没有这样做，我不明白为什么。

Answer 1

您有两种选择。

您可以使用文档就绪：

$(document).ready(function() {
    $('#uno').change(function(){
        alert('ok');
    });
});

在脚本标记中运行代码之前，它将等待文档准备就绪。

或（IMO更好的选择）是将脚本标记放在正文的末尾：

<head>

</head>

<body>
<form name='input' id='formgraph'>
<select id='uno' name='uno'>
<option value='1'>1</option>
<option value='2'>2</option>
</form>

<script src='js/jquery-1.11.0.js'></script>
<script>
    $('#uno').change(function() {alert('ok');});
</script>
</body>

这将通过更少的代码实现相同的效果。由于脚本标记在文档中较低，并且浏览器按顺序从上到下读取 - 脚本标记的内容不会运行，直到文档的其余部分准备好。

问题的根源是你不能选择$（'＃uno'），直到它存在于文档中。

Answer 2

建议在页面末尾加载js。你忘了关闭select和html标签

</head>

<body>
<form name='input' id='formgraph'>
<select id='uno' name='uno'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $('#uno').change(function() {alert('ok');});
</script>
</body>
</html>

Answer 3

您应该将您的javascript代码放在文档末尾（<body>标记之后）或$(document).ready(function(){});

像这样：

<head>
    <script src='js/jquery-1.11.0.js'></script>
</head>
<body>
    <form name='input' id='formgraph'>
        <select id='uno' name='uno'>
            <option value='1'>1</option>
            <option value='2'>2</option>
        </select>
    </form>
</body>
<script>
    $('#uno').change(function() {alert('ok');});
</script>

或者这个：

<head>
    <script src='js/jquery-1.11.0.js'></script>
    <script> <!-- You might want to put this, too after your </body> -->
        $(document).ready(function()
        {
            $('#uno').change(function() {alert('ok');});
        }
    </script>
</head>
<body>
    <form name='input' id='formgraph'>
        <select id='uno' name='uno'>
            <option value='1'>1</option>
            <option value='2'>2</option>
        </select>
    </form>
</body>

您可能还想将javascript放入不同的文件中，而不是放在HTML的中间。

您还有无效的标记，因为您没有关闭<select>标记，我在我的示例中修复了它。

为什么jquery更改功能不起作用

3 个答案: