mouseover and related code won't work

mouseover and related code won't work

In the below code  I want the <td id='disp'> to be subject to toggling the background color.


  1. function showTable(peopleData) {

        var headStr="<br /><br />60th Reunion for Ridgewood Highschool Classmates ";

        var table_str="";
        var prev="";
        var i=0;

        $("#div1").append(headStr + "<p></p>"); // header
       
            table_str = "<table id='peopleTbl' class='center' border='4' cellspacing='6' cellpadding='4' bgcolor='#fff99d' ><br/>";     
            table_str+="<caption> Classmates 1954 RHS</caption>";
            table_str+="<thead><tr><th>Name</th><th>Married Name</th><th>Spouse</th><th>Phone</th><th>E-Mail</th></thead><tbody>";
           
        $.each(peopleData, function() {      // get people data
     
            table_str+="<tr><td class='disp'>"+this.display+"</td><td>"+this.married+"</td><td>"+this.spouse+"</td><td>"+this.phone+"</td><td>"+this.email+"</td></tr>";
         
        }); // each

        table_str+="</tbody></table>";
     
       $("#div1").append(table_str + "<p></p>");
       
    } // showTable


The contents of my csv.js file are:


  1. $( document ).ready(function() { 
       
        var choice="";
       
        $('td.disp').on("mouseover",  function(e) {  // changes color on selected element in table
                 $(this).addClass('selectedRow');                 
              });
              
              $('td.disp').on("mouseout",  function(e) {
                 $(this).removeClass('selectedRow');
              });
             
               $('td.disp').on("click", function(e) {                     
                         choice=$.trim($(this).text());

                         $("#divi").remove();
                    
                         showDetails(choice);                        
            });
           
    function showDetails(choice) {   
        $.ajax ({
                     type: "POST",
                     url: "../testonly/test-queriesCSV.php",
                     data: {person:choice},
                     success: Success                          
        }); // ajax       
        }


    function Success(data)     {

        if(!data[0]) {
            document.write("No additional data.");
            return false;
        }
       
    document.write(data[0]['address']+'&nbsp;&nbsp;&nbsp;&nbsp;'+data[0]['city']+", "+data[0]['state']+" "+data[0]['zip']);

    }

    }); // doc ready
                 

This is my tester code which works OK: Uses same csv.js as above.

  1. <!DOCTYPE html>

    <html>
        <head>

            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <title>JQUERY - Toggle background colors in a table </title>
           
    <!-- ============== styles  ================ -->

    <link rel="stylesheet " type="text/css" href="css/test.css" />

    <!-- ============== scripts1 ================ -->

        <script  type="text/javascript" src="../../jquery/jquery-1.9.1.js"></script>   
        <script type="text/javascript" src="csv.js"></script>   
        </head>

        <body>
       
        <div id="div1">
           
            <p> This is my code to see if jquery will change background color.</p>
       
          <table id='peopleTbl' class='center' border='4' cellspacing='6' cellpadding='4' bgcolor='#fff99d' ><br/>     
            <caption> Classmates 1954 Benson HS</caption>
            <thead><tr><th>Name</th><th>Married Name</th><th>Spouse</th></thead>
            <tbody>
            <tr><td class='disp'>Jones, Alice</td><td>Meyer</td><td>George</td></tr>
               <tr><td class='disp'>Baughman, Barbara</td><td>Hammersmith</td><td>John</td></tr>
               </tbody>
           </table>
             
    </div>   
           
        </body>
    </html>