Earlier today I asked a question and got a good answer here. However when I added the code to my MVC3 project the jQuery mouseover event never gets fired. The jsFiddle in the previous question (here) works fine, but not when I add the code into my script file.
Therefore I decided to modify my _Layout file with a much simpler test and that also fails to work with the mouseover event. Below is my simple test:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/jquery-1.8.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$("#testtest").mouseover(function () {
$("#testtest").text("OVER");
}).mouseout(function () {
$("#testtest").text("OUT");
});
});
</script>
</head>
<body>
<div class="page">
<header>
//SNIP
</header>
<section id="main">
<div>
</div>
@RenderBody()
</section>
<footer>
//SNIP
</footer>
</div>
<div style="clear: both; height: 50px"></div>
<div id="#testtest" style="background-color: Red; height: 100px; width: 400px; display: block">
NOTHING
</div>
</body>
</html>
I have also tried the mouseenter and mouseleave events, but no change.
Can anyone help me out here? I’m sure I’m missing something simple here, but I can’t figure it out!
Thanks very much.
Change
<div id="#testtest"to<div id="testtest"#is just a key for jquery to search by ID