Jquery not working on ajax loaded content div
I'm having trouble getting a page with jquery and ajax to work. I'm trying
to make this example as simple as possible. The jquery works when it's on
a single page but I cannot get it to work after the call.
2 pages, first page:
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery-1.8.2.min.js"></script>
<style type='text/css'>
#one {
width: 200px;
height: 200px;
background: red;
}
#two{
width: 200px;
height: 200px;
background: blue;
}
.show {
display: none;
background: yellow;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("definition.jsp");
});
});
</script>
<script type="text/javascript">
$('#wrapper').on('mouseenter', '.touch', function() {
$(this).next('.show').fadeIn(800);
}).on('mouseleave', '.touch', function() {
$(this).next('.show').delay(800).fadeOut(800);
});
</script>
</head>
<body>
<div id="div1"><h2>jQuery AJAX Test</h2></div>
<button>Get External Content</button>
</body>
Second page:
<div id="wrapper">
<div id="parent_one">
<div class="touch" id="one">Enter</div>
<div class="show">Works</div>
</div>
<div id="parent_two">
<div class="touch" id="two">Enter</div>
<div class="show">Second Works</div>
</div>
Any ideas? Help please!
No comments:
Post a Comment