title: When I use jQuery with ajax (XMLhttpREquest), jQuery doesn't work, why?
body: <p>I have a <code>XMLhttpRequest</code> when I get the response I want to bind a div that uses jQuery for some animation (tabs), but when I get the response the display the tabs, then the jQuery doesn't work, but if I transfer the block (div) that uses jQuery outside the position that uses Ajax, then it works fine ....</p>
  
  <pre><code>function searchLocations()
  {
      var xmlhttp;
      var x, xx, txt;
  
      var search_text = document.getElementById("txtSearch").value;
  
      if(search_text != "")
      {
          if(window.XMLHttpRequest)
              xmlhttp = new XMLHttpRequest();
          else
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  
          xmlhttp.onreadystatechange = function()
          {
               if(xmlhttp.readyState == 1)
                   document.getElementById("search_locations_result").innerHTML="&lt;p align='center' &gt;&lt;img src='account/images/working.gif'&gt;&lt;/p&gt;";
  
               else if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
               {
                  document.getElementById("status").innerHTML="";
                  //document.getElementById("txtSearch").value="";
                  x=xmlhttp.responseXML.documentElement.getElementsByTagName("Result");   
                  txt="&lt;table border='0' width='100%'&gt;";
  
                  for (i = 0; i &lt; x.length; i++)
                  {
                      txt = txt + "&lt;div class=\"d"+id2+"\" style=\"display:none\"&gt;"+
  "&lt;div id='adv' class='usual'&gt; "+
    "&lt;ul&gt;"+
      "&lt;li&gt;&lt;a href='#t13'&gt;Tab 1&lt;/a&gt;&lt;/li&gt; "+
      "&lt;li&gt;&lt;a href='#t23' class='selected'&gt;Tab 2&lt;/a&gt;&lt;/li&gt; "+
     " &lt;li&gt;&lt;a href='#t33'&gt;Tab 3&lt;/a&gt;&lt;/li&gt; "+
    "&lt;/ul&gt; "+
    "&lt;div id='t13' style='display: none; '&gt;This is tab 1.&lt;/div&gt; "+
    "&lt;div id='t23' style='display: block; '&gt;More content in tab 2.&lt;/div&gt;" +
   " &lt;div id='t33' style='display: none; '&gt;Tab 3 is always last!&lt;/div&gt; "+
  "&lt;/div&gt; "+
  
          "&lt;/div&gt;";
  
          }// end for
  
                  document.getElementById("search_locations_result").innerHTML=txt;               
               }
              }
          xmlhttp.open("GET","ajax_search_locations.php?name="+search_text+"&amp;page="+page,true);
          xmlhttp.send();
          }
          else
              document.getElementById("status").innerHTML="";
  
      }
  </code></pre>
  
  <p>Where div usual is that uses jQuery like this :</p>
  
  <pre><code>$(document).ready(function() {
      $("div.usual ul").idTabs();
  });
  </code></pre>