title: how to bind piece of javascript after ajax update
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/10116170/how-to-bind-a-function-to-element-loaded-via-ajax">How to bind a function to Element loaded via Ajax</a>  </p>
  </blockquote>
  
  
  
  <p>in my application I want to populate an info panel onmouseover of some cell and highlight the cell so that the user can see which cell. I used the following js and css, which worked well for cells that exist when the page is first loaded</p>
  
  <pre><code>$(document).ready(function(){
      $("table1 td").hover(function(){
      $("table1 td").removeClass('highlight');
      $(this).addClass('highlight');
      });
  });
  </code></pre>
  
  <p>and highlight</p>
  
  <pre><code>.highlight{
      border-style:outset;
      border-width:5px;
      border-color:#0000ff;
  }
  </code></pre>
  
  <p>But in my application the table1 td are generated by a wicket listview and will be updated via Ajax when the user does a search. And after an Ajax update those js code had no effect. How can I make those js code still work after Ajax update? I really appreciate any help!</p>