Safari & Ajax + JQuery

Loading content working in FF, IE, Crome and Opera - not in Safari 5

[max4]

Hello,

Please forgive my lack of knowledge in Ajax terminology. I will try to explain my problem as best I can.

I am using a plugin called ajaxContent to handle my AJax loads (rather than using the .load() function). I create a class called "ajax" and include that in my anchor tags then initiate the plugin via $(document).ready(function(){}); like so:

$(document).ready(function(){
 $('.ajax').ajaxContent({target:'#content'});
});

The first issue I ran into was that the links in the content, loaded via ajaxContent, would not load in the proper div container. In other words, clicking on a link with the "ajax" class, from within the "new" content, would not load new content in the "content" div but rather it would open a new page instead. After much tinkering, I resolved this issue by including my functions.js file in the header of all loaded content. I think (though I'm not sure) that the issue was caused because the "old" content had already initialized ajaxContent when the document loaded while the "new" content could not do this. This resolved the issue in FireFox, Chrome, IE7, IE8 and Opera.

I recently decided to also support Safari (Safari 5). Safari doesn't like my solution to the issue described above. Safari correctly initializes ajaxContent. Any links with the "ajax" class on the initial page will load data, properly, into the "content" div. However, clicking on a link from within the "new" content will work the first time, but the second time a link with the "ajax" class is clicked on, the entire page is redirected to the link as if ajaxContent was never initialized.

Searching the net led me to one possible solution, JQuery .live(). So, I tried the following:

$(document).ready(function(){
 $('.ajax').live("click", function(){
 $(".ajax").ajaxContent({target:'#content'});
 });
});

But this broke ajaxContent on all browsers. I'm at my wits end with this problem. Does anyone have any idea what could be causing this behavior?

Thanks!
Max

[max4]

I resolved this issue by including the livequery plugin with my pages and using .livequery() rather than .live() to handle the custom event. The following syntax is a working example:

$('ajax')
.livequery(function(){
 $(this).ajaxContent({target:'#content'});
});

Max