Question

我不是编程新手，但我是Javascript和jQuery的新手。

在我尝试编写最基本的东西时，我写了下面的内容。

如果我将jQuery include + my javascript和HTML复制到jsFiddle，它就可以了。当您在下拉列表中选择某些内容时，您会看到警告框。

但是在我的浏览器中打开.html文件，它不起作用。您可以整天更改选择，但没有任何反应。

我觉得这是最基本的事情，但我还没能弄清楚。我做的是什么愚蠢的初学者错误？ Javascript是客户端的，所以它应该工作我会想。我正在使用Chrome，如果它很重要但在IE中也是如此。两者都启用了Javascript。

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $('#selections').change(function() {
            alert('Test');
        });
    </script>
</head>

<body>

    <select id="selections">
        <option>Options...</option>
        <option value="zero">zero</option>
        <option value="one">one</option>
    </select>

</body>

</html>

Answer 1

您必须将脚本放在$（document）.ready（）函数中。在JQuery中，这可确保在页面元素加载后附加所有事件。请参阅以下修订代码：

$(document).ready(function() { $('#selections').change(function() { alert('Test'); }); });

Answer 2

在关闭正文标记之前放置脚本标记，它不起作用，因为在呈现之前你就绑定了元素＆＃34; #selections＆＃34;。

<html>

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

</head>

<body>

    <select id="selections">
        <option>Options...</option>
        <option value="zero">zero</option>
        <option value="one">one</option>
    </select>


    <script>
        $('#selections').change(function() {
            alert('Test');
        });
    </script>
</body>

或者如果你需要它在头部，请将它包装在$（document）.ready中，就像这样，

$(document).ready(function(){
    $('#selections').change(function() {
            alert('Test');
        });
});

基本的Javascript / jQuery工作jFiddle，但不是我的浏览器

2 个答案: