Question

我有这个Javascript / JQuery代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    name = $("#name").val();

    alert("Name: " + name);

</script>

这个HTML：

<form name="report" action="send.php" method="post">

    <input type="text" name="name" id="name" value="Senna" />
    <input type="submit" value="Send" />

</form>

当页面加载时，我得到“Name：undefined”而不是“Name：Senna”。

有人可以帮助我获得预期的结果吗？

Answer 1

您应该将代码放在DOM ready handler：

中

$(function() {
    var name = $("#name").val();
    alert("Name: " + name);
});

否则，您正在尝试使用尚未加载的元素。

Answer 2

当JavaScript提供用于执行代码的load事件时页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。在大多数情况下，只要DOM层次结构完全可以运行脚本建造。传递给.ready（）的处理程序是保证的在DOM准备好之后执行，所以这通常是最好的地方附加所有其他事件处理程序并运行其他jQuery代码。

一旦页面加载，您需要指示执行该功能。目前，您只是定义它而不是判断何时执行它。

$(document).ready(function(){
    name = $('#name').val();
    alert('Name: ' + name);
});

或者：

$(function(){
    name = $('#name').val();
    alert('Name: ' + name);
});

Answer 3

您需要document.ready回调。

将代码放在像这样的函数中 -

$(function(){
  // code goes here
});

您需要使用此回调来了解jQuery 和何时加载整个DOM。只有这样，你才能开始用你的jQuery代码来操作Markup和CSS。

上面的代码实际上只是简写 -

$(document).ready(function(){
  // code goes here
});

这使用.ready()方法 - http://api.jquery.com/ready/
.ready()函数描述的摘录 -

...传递给.ready()的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有内容的最佳位置其他事件处理程序并运行其他jQuery代码。 ...

_强调添加

使用Javascript / JQuery并在页面加载时获取未定义的var

3 个答案: