Jquery subpages issue

Page 1 of 1

1 Replies - 1754 Views - Last Post: 02 November 2012 - 03:35 AM

#1 el_pancho  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 88
  • Joined: 26-April 12

Jquery subpages issue

Posted 07 August 2012 - 12:15 PM

hi there,


i have 2 pages, index.php and main.php

Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Home Ribeirao - Admin</title>
		<link href='css/site.css' type='text/css' rel='stylesheet' />
		<script src='js/jquery.js' type='text/javascript'></script>
		<script src='js/site.js' type='text/javascript'></script>
		<script src='js/others.js' type='text/javascript'></script>
	</head>
	<body>
		<div id='logo'>
			<img src='logo.png' />
		</div>
		<div id='wrap'>
                     <ul>
			<li id="item_menu" class='categorias'><a href="#"><p>Categorias</p></a>
	                </li>
                     </ul>
			<div id='main'>
			
			</div>
		</div>
	</body>	
</html>


main.php

                     <ul>
			<li id="item_menu" class='test'><a href="#"><p>test</p></a>
	                </li>
                     </ul>


and my JS code
(function($) {
			
		$(document).ready(function(){
			
			$(".categorias").click( function()
				{
				
					loading();
					$.ajax({url: "main.php" ,cache:false, success: function(result)
					{
					
						$("#main").html(result);
					
					}});
                		
			});
$(".test").click( function()
				{
				
					loading();
					$.ajax({url: "test.php" ,cache:false, success: function(result)
					{
					
						$("#main").html(result);
					
					}});
                		
			});
})(jQuery);

My problem is:
when i click CATEGORIAS on index, it loads the main.php on #main div very well, but if i click on test, the link does not work, what is going on? test.php is just a page with an echo TEST.

the only way i found to make the TEST works is adding header to the page and reloading the JS files. but if you click like 20 times on the link the page start loading slower, and slower each time you click on it.

This post has been edited by el_pancho: 07 August 2012 - 12:12 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Jquery subpages issue

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Jquery subpages issue

Posted 02 November 2012 - 03:35 AM

Hello,

The problem appears to be that you register the click for .categorias inside your $(document).ready() scope but not the .test. Therefore the first is being hooked when the page is ready and the elements exist, the second is registered before the elements exist.

Simply move the second hook inside the same scope as the first and it will work. On a further note I suggest you hook your click functions to the document rather than an individual element, like the example below shows.

$(document).on('click', '.categorias', function()
{
	loading();
	$.ajax({url: "main.php" ,cache:false, success: function(result)
	{
		$("#main").html(result);
	}
});


The advantage of doing so is you can hook this before the element exists and it will still work, because the hook is stored in the document rather than the element. You can even delete the rebuild the element and providing it has the same class, it will still work.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1