jQuery Forum

I have some ROW striping code that works really well (thanks to a tutorial here).

<script type="text/javascript">
$("document").ready( function () {
    $(".data tr").mouseover(function() {
        $(this).addClass("over");   
    $});
    $(".data tr").mouseout(function() {
        $(this).removeClass("over");   
    $});
});
</script>
<table class="data">
      <tr>
            <td>row one</td>
      </tr>
      <tr>
            <td>row two</td>
      </tr>
</table>

The issue I am having is when I bring one of the tables via AJAX and wrap it in a div.  So, I have an external file that looks like this:

<div id="A">
<table class="data">
      <tr>
            <td>row one</td>
      </tr>
      <tr>
            <td>row two</td>
      </tr>
</table>
</div>
<div id="B">
<table class="data">
      <tr>
            <td>row one</td>
      </tr>
      <tr>
            <td>row two</td>
      </tr>
</table>
</div>

The uses selects A or B to pull in the appropriate info into a new div, "userData".

<script type="text/javascript">
$("document").ready( function () {

    $(".whichContent").click(function(e) {
        X = e.target.value;
        $("#userData").load("AJAX.htm #"+X);
    $});

});
</script>

<div id="userData">DIV A OR DIV B DATA GETS PUSHED HERE</div>

The problem is, these tables are not striped.  My guess is that it's because they are layered in the divs too deeply or not being referenced correctly.

Can you help me?