I have a problem with jquery. What I would like to make is that a tab will change a c

JavaScript
1

I have a problem with jquery. What I would like to make is that a tab will change a class when somebody clicks on it. Everything else works ok, excepting this. I spent couple of hours on this and it still doesn’t work. It works only when I click on a tab 1st time, but than not anymore. I tried to include click function inside another function and also many other combinations and still doesn’t work. I would be so glad if anybody can tell me where exactly I should include the last click function.

<html>
	<head>
		<title>jQuery: AJAX Tabs</title>	
    <link rel="stylesheet" type="text/css" href="class.css" /> link 
		<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
		<script type="text/javascript"> 

		
			$(document).ready(function()
			{    	
				$("#tab1").click(function()
				{
					$.ajax(
		        {
	            url: "tab1.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);			          				          
	            }
		        });	
        });
				
				$("#tab2").click(function()
				{
					$.ajax(
		        {
	            url: "tab2.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);
                         
	            }
		        });	
        });
			
      $("#tab1").click(function()
				{
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='selected' href='#'>Tab 1</a></li><li><a id='tab2' class='unselected' href='#'>Tab 2</a></li></ul>");             
        });              

      $("#tab2").click(function()
				{ 
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='unselected' href='#'>Tab 1</a></li><li><a id='tab2' class='selected' href='#'>Tab 2</a></li></ul>");             
        }); 
      });
		</script>
		
	</head>
	<body>
		<a href="http://jetlogs.org/2008/03/17/jquery-ajax-tabs/">&laquo; Code Explanation</a> | <a href="jquery_ajax_tabs.zip">Download Source</a>
		<p>&nbsp;</p>		
		<div class="container">
			<div class="navcontainer">
				<ul>
					<li><a id="tab1" href="#">Tab 1</a></li>
					<li><a id="tab2" href="#">Tab 2</a></li>
				</ul>
			</div>
			<div id="tabcontent">
			Here is a simple demonstration of how AJAX Tabs work.
			</div>		
		</div>
	</body>
</html>
2

here is a code in a nicer view:

3

When you do


      $("#tab1").click(function()
         //some code...
        });

jquery looks in the dom, and finds elements that currently exist in the dom which match your selector. Then, once it has that element(or list of elements), it tells those elements that they need to run your function when they get clicked.

So, if you later add new elements to the dom, these new elements will not know that they need to run your function when they get clicked.

And that’s your problem. You are removing the elements, and then creating new ones. Even though the new elements may be similar, and even have the same id, they are different elements.

You could do one of the following
-dont remove the old elements that have the click event handlers. Just update thier contents.
-keep doing what you’re doing, but make sure to re assign click event handlers to the new elements after inserting them into the dom.
-take a look at jquery’s live() method, which does a lot of work behind the scenes so that you don’t have the above problem.