Loading elements into the DOM with jQuery.

Question

Hello everybody,
I have a quick question that I'm sure some of you would have an answer for, let me explain.
I'm working on a very simple website, static content, pure HTML, and CSS, and some javascript to make everybody's life easier.
The site has a header, nav, side bar and footer and although the site is static, I thought I could use something like ".load()" to load the HTML files that would make for the nav bar, side bar and footer.
I'm using jQuery and I realized that the anchor tags in the files that I load don't behave the way I expect them to do.
As an example, I wanted to use "preventDefault()" to keep my links in check, and it only works with the anchor tags that are hard-coded into each HTML page, anchor tags that are part of the file that was loaded bypass the "preventDefault()" all together.
I don't have enough experience to figure out why, although after some research I realized that it has to do with the DOM and the elements that I'm adding to it.

I would appreciate any help.
Thanks

Answer 1

When you append elements with jQuery it removes your events. If you really want to pursue this page building method you'll have to get creative with jQuery live to apply events to the dynamically added items.

http://api.jquery.com/live/

Answer 2

Most likely what's happening is that you are setting up the event handlers before the AJAX content loads. The event handlers such as click, etc. will only apply to elements that exist in the DOM at that point, which unfortunately may not include your header, footer, nav bar links etc.

Check out jQuery live, and jQuery delegate to do what you want, or setup the handlers after all content has been loaded through AJAX.