Hi Marc,
That makes perfect sense. The events are attached only when the DOM gets
loaded after you call the $(document).ready.
Once you load the new contents either you have to attach the events again or
you can use the jquery 'live' to attach the events only one time .
This will trigger the events even for the elements which are loaded in the
future.
eg.
$("#home_images a, #content_footer a").mouseover(function(){ //rollover....
can be replaced like this
$("#home_images a, #content_footer a").live('mouseover', function(){
//rollover....
Varun
On Mon, Dec 6, 2010 at 9:52 AM, Marc Steel <[email protected]> wrote:
> The scripts work fine upon page load, and I can load in the new content
> from their files, but when I re-load the home page content, the event
> handlers stop working.
>
> I am loading in content via live() but still no avail... Any help would be
> greatly appreciated. Thanks.
>
>
>
> This is the content on home.html (which is the exact same as the default
> content when the page loads)
>
> <div id="home_images">
> <a href=""><img src="images/home/swim.jpg" class="left"
> data-roll="swim" /></a>
> <a href=""><img src="images/home/bike.jpg" class="left"
> data-roll="bike" /></a>
> <a href=""><img src="images/home/run.jpg" class="left"
> data-roll="run" /></a>
> </div>
>
> And here is the jquery code.
>
>
>
> events = new Array('swim', 'bike', 'run');
>
> $(document).ready(function() {
>
> // Preload all rollovers
> $("#home_images img").each(function() {
> // Set the original src
> rollsrc = $(this).attr("src");
> rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
> $("<img>").attr("src", rollON);
> });
>
> // Navigation rollovers
> $("#home_images a, #content_footer a").mouseover(function(){
> //rollover
> //image being rolled over
> active_image =
> ($(this).children("img").attr("data-roll"));
>
> for (e in events) {
> if (events[e] == active_image) {
> $("#home_images img[data-roll='"+
> active_image +"']").attr('src', 'images/home/'+ active_image +'_over.jpg');
> $("#content_footer img[data-roll='"+
> active_image +"']").attr('src', 'images/buttons/'+ active_image
> +'_over.gif');
> } else {
> $("#home_images img[data-roll='"+
> events[e] +"']").attr('src', 'images/home/'+ events[e] +'_bw.jpg');
> }
> }
> });
>
> $("#home_images a, #content_footer a").mouseout(function(){
> //rollout
> for (e in events) {
> active_image = events[e];
> $("#home_images img[data-roll='"+
> active_image +"']").attr('src', 'images/home/'+ active_image +'.jpg');
> $("#content_footer img[data-roll='"+
> active_image +"']").attr('src', 'images/buttons/'+ active_image +'.gif');
> }
> });
>
>
> $(".content").live('click', function(e){
> content = ($(this).attr("data-content"));
> div = ($(this).attr("data-div"));
> if (div == undefined) div =
> 'inner_content_height_spacer';
> $('#'+ div).load('pages/'+ content +'.html');
> e.preventDefault();
> });
>
> });
> _______________________________________________
> JSMentors mailing list
> [email protected]
> http://jsmentors.com/mailman/listinfo/jsmentors_jsmentors.com
>
--
Varun Aggarwal
_______________________________________________
JSMentors mailing list
[email protected]
http://jsmentors.com/mailman/listinfo/jsmentors_jsmentors.com
