Friday, October 31, 2008

[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&nbsp;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

No comments: