title: can't seem to get this ajax code to work? Won't display "dynamically"
body: <p>I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.</p>
  
  <p>Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work. </p>
  
  <p>The search code is simply a form that takes text, then im using the xmlhttp method to make it live.</p>
  
  <p>Now, displaying it is as follows: (I have given it a class to use in the ajax)</p>
  
  <pre><code>echo "&lt;a href = 'display.php' class='display'&gt;" . $row['carName'] . "&lt;/a&gt;";
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code>$(document).ready(function() {
      $(".display").each(function(){
          var btn = $(this);
          btn.on("click",function(){
              $("#displayDiv").empty();
              $.post("display.php",function(data) {
                  $("#displayDiv").append(data);
  </code></pre>
  
  <p>Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.</p>
  
  <p>Thanks.</p>
  
  <p>EDIT: it loads test.php which is:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;    
          &lt;div id="displayDiv"&gt;    
              &lt;h2&gt; Test &lt;/h2&gt;
          &lt;/div&gt;    
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT2: div id which is in the same page as script:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;div id="displayDiv" style="width: 40%; float:right"&gt;
  
  
  &lt;/div&gt;
  </code></pre>