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

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

虽然JavaScript提供了在呈现页面时执行代码的load事件，但在完全接收到所有资产(如图像)之前，不会触发此事件。在大多数情况下，只要完全构造了DOM层次结构，脚本就可以运行。传递给.ready()的处理程序保证在DOM就绪后执行，因此这通常是附加所有其他事件处理程序和运行其他jQuery代码的最佳位置。

您需要在页面加载后指示执行该函数。目前，您只是定义它，而不是在何时执行它。

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

或者：

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

Answer 2

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

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

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