Question

我将$(document).ready()代码放在文档的HEAD中，在其中我有alert($("#some-textbox").val())，但是当页面加载时会产生“未定义”。但是，如果我将此代码移动到页面的页脚，它就可以工作。

代码：

<head>
...
<script type="text/javascript">
  var searchForm = $("#search-form");
  var searchBar = $("#search-bar");
  var INITIAL_TEXT = "Start typing to find friends or colleagues...";
  $(document).ready(function() {

      alert(searchBar.val()); // For testing purpose only; outputs undefined

      searchForm.submit(function(e) {
            if(searchBar.val() == INITIAL_TEXT) {
                searchBar.val("");
            }
      });
      searchBar.focus(function() {
            if(searchBar.val() == INITIAL_TEXT) {
                searchBar.val("");
            }
      });
      searchBar.blur(function() {
            if(searchBar.val() == "") {
                searchBar.val(INITIAL_TEXT);
            }
      });
  });
  </script>

Answer 1

您的选择器$("some-textbox").val()无效。

你的意思是

$(".some-textbox").val()

或

$("#some-textbox").val()

可能？

更新（问题已更改）

您应该在document.ready

中移动变量定义

$(document).ready(function() {
    var searchForm = $("#search-form");
    var searchBar = $("#search-bar");
    //....
});

Answer 2

当DOM尚未加载时，您正在doucment.ready之外获取对象。

将整个代码移动到函数中。

jQuery文件在实际读取之前就已准备就绪

2 个答案: