Can't get .on(change... to work regardless of where I put code

Can't get .on(change... to work regardless of where I put code

Here we go again!!

I've given up trying to run all code on one page(php). Now have tree2.html (client side),  and tree2.php (server side)

 Below is the tree2.html of my program.
I can't get the .on(change ..  part to work as an empty tiny, tiny table is displayed before I can enter data into the <input> block. I know this has to do with the asyn running of HTML but how do you make this work?

  1. <!DOCTYPE html> 
                      
    <html>
     
    <head><title>tree2.html Sun 02Jul2017</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     
    <!-- ============== head scripts  ================ -->
     
    <script type="text/javascript" src="../jquery/jquery-2.1.1.js"></script> 
     
    <style>
    .hov:hover {
        color: red;
        font-weight: bold;
        }
       
    li    {
        list-style-type:none;
        }   
    </style>
     
    </head>
     
    <!-- ============== html  ================ -->
     
    <body>

    <form action=""#"" method="POST">

        Enter Base Directory to Choose Photo Directory From

        <input type="text" id="dir">
        <!--<input type="submit">     using .on(change, ... line 51 -->
     
    </form>

    <!-- ==============   body scripts 1 of 1   ================ -->

    <script type="text/javascript">

    $(function(){  // ready

    var dir="/home/rick/Desktop/2017Jun27-12:36_TransFile_Pictures"; // for testing  works ok 
     
    $("#tbl1").hide();

    //  CAN'T GET THIS TO WORK REGARDLESS OF WHERE I PUT IT
    // IT CALLS AJAX BEFORE YOU CAN ENTER THE DATA IN INPUT
    /*
    var dir="";
    $("#dir").on('change', function () {
    dir=$("#dir").val();
    });
    */

    myAjaxCall(dir);

    function myAjaxCall(dir) {
     
    var request = $.ajax( {
        url: "tree2.php",
        type: "POST",
        data: {"dir":dir},
        dataType: "json"       
    }); // end ajax()
      
    request.done(showDirs);
      
       
    request.fail(function( jqXHR, textStatus ) {
        alert( "Request failed: line 74 myAjaxCall() " + textStatus );  
    });


    } // end myAjaxCall()

    }); // end ready()


    //  ==========================  FUNCTION showDirs()  ==================

    function showDirs(data) {

     var i=0;
     var disp="";
     var choice="";
     
     $("#tbl1").show();
     
     $("body").append("<h3> Pick A Directory to Process Photos</h3>");
     
        table_str = "<table id='tbl1' class='center' id='verifyTbl'  border='4' cellspacing='2' cellpadding='4' bgcolor='#fff99d' ><br/>";
         
         $.each(data, function (index, value) {
             disp="disp"+i++;
            table_str += "<tr><td id='disp' class='hov'>" + value + "</td></tr>";
        });
       
        table_str += "</table><p></p><p></p>";
       
        $("body").append(table_str + "<p></p>");
       
        $("td#disp").click(function () {
            console.log("testing");
            choice=($( this ).text());
            alert("You chose: " + choice);
            // ajax call to getImageFiles.php goes here.   
     
        }); // end click()
       
       
    } // end showDirs()  ===================================================

    </script>

    </body>
    </html>