Du behöver invänta att sidan laddats klart, följande löser detta:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="iso-8859-1">
<meta name="generator" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.2.6.min.js"></script>
<script language='javascript'>
$(document).ready(function() {
var element = document.getElementById('clickable');
element.addEventListener('click',function () {
alert('test');
},false);
});
</script>
</head>
<body>
<div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>
<div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>
</body>
</html>
Man kan dock undra varför du inte använder jQuerys egna funktioner för att välja element, när du ändå har laddat in jQuery?
Tex.:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="iso-8859-1">
<meta name="generator" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.2.6.min.js"></script>
<script language='javascript'>
$(document).ready(function() {
$("#clickable").click(function() {
alert('test');
});
});
</script>
</head>
<body>
<div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>
<div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>
</body>
</html>