これをHTMLとして持つ小さなページを作成しました。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
そして、私は私のmain.jsを持っています:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false });
$loginButton.click(function() {
$loginDiv.dialog("open");
//alert('sfsdf');
});
}
アラートをトリガーすることはできますが、.ready()ハンドラーがヘッドで指定されている場合、セレクターは要素を返しません。
ボディタグの最後に移動してみましたが、すべて正常に動作します。JQueryのドキュメントによると、ハンドラーが呼び出される前に、DOM全体とすべての画像とリソースが読み込まれることになっています。何が得られますか?
- Linuxx86上のFirefox16.0.2
- JQuery 1.8.2
- JQuery UI 1.9.2(ここでは実際には使用されていません)