[jQuery] simple rollover on a tag show or hide div tag in jQuery
I am creating a profile update page using jQuery. The content of the
profile is loaded dynamically into a div tag on the page.
$(document).ready(function() {
// Your code goes here
$("div#notifications").load("supportscripts/writeoutprofile.asp");
});
So this loads the profile into the nofifications div tag. This will
load a series of div tags which look similar to this:
<div class="profileLine"><div class="profileTitle"><a href="#"
id="a_ep1">Name</a><div class="editProfile" id="ep1">Edit Profile</
div></div><div class="profileText">Graham Cole</div></div>
All the <A> tags are dynamically named a_ep1 through a_ep6 and all the
<DIV> tags are dynamically named ep1 through ep6. So I would like to
have this set up so that when I rollover the <A> tag the <DIV> tag
shows and when I rollout it hides. I had this running using several
lines of code and an event handler on each <A> tag but apparently it
is much easier in jQuery. For some reason though the code I am using
does not appear to work:
$("#a_ep1").hover(
function () {
$("#ep1").show();
},
function () {
$("#ep1").hide();
return false;
}
);
does anybody have any suggestions on what I might be missing. My
initial thoughts are because the <A> and <DIV> tags do not exist in
the source code but are loaded dynamically that jQuery cannot find
them, but I am only guessing.
Any help greatly appreciated?
Graham