SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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 Code:
    <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. #2
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a code in a nicer view:

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you do
    Code:
          $("#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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •