Question

我有以下代码，我正在努力工作。出于某种原因it works fine on JSFiddle，但是当我从服务器提供代码时输入文本框时没有任何反应。为什么会这样？

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>

    <script type="text/javascript">
        $('#userInput').keyup(function(){
            alert("key up");
        });
    </script>
</head>

<body>
    <input id="userInput" type="text">
</body>
</html>

Answer 1

您的脚本正在将keyup函数附加到尚不存在的元素。您需要将脚本放在页面底部，或使用$(document).ready(function(){//your code});

Answer 2

可能是因为你需要将它包装在.ready函数

中

$(document).ready(function() {
    $('#userInput').keyup(function(){
        alert("key up");
    });
});

Answer 3

你的代码应该是dom ready

$(function(){
        $('#userInput').keyup(function(){
            alert("key up");
        });
});

默认情况下，将在第二个下拉列表Frameworks & Extensions中的onload部分下的jsfiddle中选择，这意味着脚本框架中的所有脚本只有在加载完整个dom后才会执行。 / p>

但是当我们将该脚本移动到某个页面时，我们需要使用.ready

演示：Problem
演示：Solution

Answer 4

您的JS代码在DOM准备好之前执行。将JavaScript置于底部或使用jQuery $(document).ready()。

Answer 5

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>

    <script type="text/javascript">
    $(function() {
        $('#userInput').keyup(function(){
            alert("key up");
     });
        });
    </script>
</head>

<body>
    <input id="userInput" type="text">
</body>
</html>

为什么这个简单的代码在JSFiddle上运行而在我的服务器上运行？

5 个答案: