title: jQuery AJAX: update two parts of a page with scripts inside the response
body: <p>I'm using jQuery AJAX to load (and refresh) a part of my page</p>
  
  <p>Here's the jQuery function in my main page:</p>
  
  <pre><code>function updateCategories(){
      catList = $('#cat_list');
      catList.hide();
      //send the post to shoutbox.php
      $.ajax({
          type: "POST", url: "../ajax/products-categories.php", data: "action=refresh",
          complete: function(data){
              catList.html(data.responseText).fadeIn();
          }
      });
  }
  $(document).ready(function(){
      updateCategories();
  });
  </code></pre>
  
  <p>And here's the requested file ("../ajax/products-categories.php"):</p>
  
  <pre><code>&lt;ol id="categories"&gt;
      &lt;li&gt;Item 1 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
      &lt;li&gt;Item 2 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
      &lt;li&gt;Item 3 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
  &lt;/ol&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#categories li").hover(function(){
          $("span.actions", this).css("visibility", "visible")
      },function(){
          $("span.actions", this).css("visibility", "hidden")
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>No problem 'til here, everything is fine and pretty working: the content is loaded, and when I hover the 'li's the .actions spans are correctly shown/hidden </p>
  
  <p>But I have to update TWO parts of my page, so I was going to update this way:</p>
  
  <pre><code>function updateCategories(){
      catList = $('#cat_list');
      catSelect = $('#cat_select');
      catList.hide();
      catSelect.hide();
      //send the post to shoutbox.php
      $.ajax({
          type: "POST", url: "../ajax/products-categories.php", data: "action=refresh",
          complete: function(data){
              catSelect.html($('#tempSelect',data.responseText).html()).fadeIn();
              catList.html($('#tempList',data.responseText).html()).fadeIn();
          }
      });
  }
  $(document).ready(function(){
      updateCategories();
  });
  </code></pre>
  
  <p>And the requested page:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="tempSelect"&gt;
          bla bla bla
      &lt;/div&gt;
      &lt;div id="tempList"&gt;
          &lt;ol id="categories"&gt;
              &lt;li&gt;Item 1 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
              &lt;li&gt;Item 2 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
              &lt;li&gt;Item 3 &lt;span class="actions"&gt;Edit | Delete&lt;/span&lt;/li&gt;
          &lt;/ol&gt;
          &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("#categories li").hover(function(){
                  $("span.actions", this).css("visibility", "visible")
              },function(){
                  $("span.actions", this).css("visibility", "hidden")
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Well, the "tempList" 'ol' is loaded, but the "hover script" doesn't work anymore...
  Why is it so? Is there a solution?
  I trued to put the "hover script" in the main page, but no luck still...
  Please, can you help me? Thanks...</p>