I'm using a jQuery plugin (link) to pull external pages into a div on my homepage, and each one of the external pages contains a jQuery-based horizontal gallery slider.
Example: http://www.iamtimothylong.com/example
You'll notice that when the external pages are loaded through the AJAX request (by clicking 'book one' or 'book two'), the horizontal slider within those external pages stops functioning.
However, the horizontal slider does work if statically placed in the div (just so it's clear that it's not a problem with the slider itself).
Anyone know a solution/workaround? One guy said
"You need to rebind the slider to the new elements after the XHR request has completed. Inside the success handler of your AJAX request, perform the mScrollBar() binding."
Unfortunately, I'm a programming ignoramus and I need it spelled out in laymen's terms. :)
And the AJAX loader source is located here: /js/menu.js
I would say it is a classic case of replacing the event that is not firing with
.live('event')Basically when the javascript is fired and attaches event handlers when the page is loaded (or whenever they are called), it attaches them to currently existing elements that exist on the page at that time, so when you load in new content (via AJAX) those events are not attached to the new content events that have just been loaded and match the selector.
To fix this jQuery has a
.live()event that matches any currently existing DOM elements AND future ones added dyamically.