ajax page load

Hello,
I'm using jQuery and ajax to load pages without reloading the entire website and I ran into a problem.
This is the jquery script:

$(function(){
	$("a[rel='tab']").click(function(e){
		e.preventDefault(); 
				
		//get the link location that was clicked
		pageurl = $(this).attr('href');
		
		//to get the ajax content and display in div with id 'content'
		if(pageurl!=window.location){
		$.ajax({url:pageurl+'?rel=tab',success: function(data){
			$('#main-wrap').html(data);
		}});
		}
		//to change the browser URL to 'pageurl'
		if(pageurl!=window.location){
			window.history.pushState({path:pageurl},'',pageurl);	
		}
		return false;  
	});
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
	$.ajax({url:location.pathname+'?rel=tab',success: function(data){
		$('#content').html(data);
	}});
});

Code (markup):

and the html code is something like this:

<div class="nav"><a href="example1.html" rel="tab">Page 1</a></div>
<div class="ajax-content">
<div class="title"><a href="title_page.html" rel="tab">Title</a></div>
</div>

HTML:

Now if I click "Page 1" that is outside the div where the ajax content is loaded it's working but if I click "Title" that is inside the div, the whole page is reloaded(ajax not working).
It's possible to make that "Title" link(which is inside the div where the ajax content is loaded) to work?

Thanks

 

anyone?....

 

That depends on what you want there. The div is an anchor to title_page,html, so when you click the link, you go to the page (which, if this IS that page, reloads it). That's how HTML works.

If you just want the word "Title" there, with no link, use

[FONT=monospace][COLOR=#009900]<[URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL] [COLOR=#000066]class[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"nav"[/COLOR]><[URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL] [COLOR=#000066]href[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"example1.html"[/COLOR] [COLOR=#000066]rel[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"tab"[/COLOR]>[/COLOR]Page 1[COLOR=#009900]<[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/a.html"][COLOR=#000000][B]a[/B][/COLOR][/URL]><[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL]>[/COLOR]
[COLOR=#009900]<[URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL] [COLOR=#000066]class[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"ajax-content"[/COLOR]>[/COLOR]
[COLOR=#009900]<[URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL] [COLOR=#000066]class[/COLOR][COLOR=#66cc66]=[/COLOR][COLOR=#ff0000]"title"[/COLOR]>[/COLOR]Title[COLOR=#009900]<[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL]>[/COLOR]
[COLOR=#009900]<[COLOR=#66cc66]/[/COLOR][URL="http://december.com/html/4/element/div.html"][COLOR=#000000][B]div[/B][/COLOR][/URL]>[/COLOR]
[/FONT]

Code (markup):