title: AJAX: How to replace content of a DIV with a link in same DIV?
body: <p><strong>I have index.php like this:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="ajax.js"&gt;&lt;/script&gt;
  
  &lt;a href='one.php' class='ajax'&gt;One&lt;/a&gt;
  
  &lt;div id="workspace"&gt;workspace&lt;/div&gt;
  </code></pre>
  
  <p><strong>one.php</strong></p>
  
  <pre><code>&lt;?php
  $arr = array ( "workspace" =&gt; "&lt;a href='two.php' class='ajax'&gt;two&lt;/a&gt;" );
  echo json_encode($arr);
  ?&gt;
  </code></pre>
  
  <p><strong>two.php</strong></p>
  
  <pre><code>&lt;?php 
  $arr = array( 'workspace' =&gt; "Hello World" );
  echo json_encode($arr);
  ?&gt;
  </code></pre>
  
  <p><strong>ajax.js</strong></p>
  
  <pre><code>jQuery(document).ready(function(){
      jQuery('.ajax').click(function(event) {
          event.preventDefault();
          // load the href attribute of the link that was clicked
          jQuery.getJSON(this.href, function(snippets) {
              for(var id in snippets) {
                  // updated to deal with any type of HTML
                  jQuery('#' + id).html(snippets[id]);
              }
          });
      });
  });
  </code></pre>
  
  <p>When index.php is loaded, there is a link(One) and a DIV(workspace). When I click 'One' link then content of one.php is called and link 'Two' appeared in 'workspace' DIV successfully. </p>
  
  <p>But now when I click link 'Two' then 'Hello World' does not appear in 'workspace' DIV and opened separately without AJAX call. </p>
  
  <p><strong>How to force this code to replace content of workspace DIV with 'Hello World' using link 'TWO' with above flow?</strong></p>
  
  <p>Thanks</p>