"click" not working
hey i am working on a simple site with 3 buttons and 1 test button. curently only the test button(the x) is coded but it does not work and i do not know why.
here is my html code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="description" content="controler">
<meta name="author" content="jk">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<meta charset="ISO-8859-1">
<title>title</title>
</head>
<body>
<div id="wrapper">
<h1 id="first">toggle vizer</h1>
<h1 id="second">toggle mouth</h1>
<h1 id="t">toggle lights</h1>
</div>
<span class=ui_close>X</span>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".ui_close").click(function () {
alert("Hello!");
});
});
</script>
</body>
and here is my css code:
#wrapper {
overflow: hidden;
}
#first {
background-color: #ff0000;
padding: 10px 10px;
border: 1px solid #00ffff;
float:left;
border: 1px solid red;
}
#second {
background-color: #00ff00;
padding: 10px 10px;
border: 1px solid #ff00ff;
float: left;
overflow: hidden;
}
#t {
background-color: #0000ff;
padding: 10px 10px;
border: 1px solid #ffff00;
float: left;
overflow: hidden;
}
body {
background-color: #7F7F7F;
}
.ui_close {
background-color: #F2E1AC;
color: #8A7A49;
position: absolute;
top: 0;
right: 0;
padding: 1px 6px;
cursor: pointer;
}
.ui_close:hover{
background-color: #8A7A49;
color: #F2E1AC;
}