Как выбрать идентификатор в jquery внутри функции Ajax?

Question

Внутри моей ajax функции успеха я использую селектор для идентификатора, который имеет формат "day_entry" + число. Я могу выбрать элементы, если использую вызов .on () внутри функции ajax, но мне не нужно событие. Размещенный код - это полный текст javascript / jquery, который я пишу. Вызов buildCalendar () заполняет таблицу элементами td с идентификатором и идентификатором day_entry. Проблема в том, что я не могу выбрать элементы td после того, как они были сгенерированы. Последний фрагмент кода - это вывод Html. Ниже указана c функция успеха, которая проблематична c. Спасибо.

success: function(data){
                    console.log(data);
                    for(var i= 0; i < data.date_query_from_db.length; i++){
                        let day_number_slice = data.date_query_from_db[i].date_entered.slice(8);
                        if(day_number_slice[0] === "0"){
                            day_number_slice = data.date_query_from_db[i].date_entered.slice(9);
                        }
                        let target_string = "#day_entry" + day_number_slice;
                        console.log(target_string);
                        // $(target_string).addClass("appointment-day");
                        $("tbody" ).on("click", "tr #day_entry1" , function (){
                            $(this).text("here"); 
                        });
                        $(target_string).text("here");
                    }
                }

<script >

        
        var dayToName = {"January":1,"February":2,"March":3,"April":4,"May":5,"June":6,"July":7,"August":8,"September":9,"October":10,"November":11,"December":12};
        // set h1's to current date
        var date = new Date();
        let current_date_format = date.getFullYear() + "-" + (date.getMonth()+1);
        
        
        

        $(function(){
            $("#calendarMonth").html(getKeyByValue(dayToName, date.getMonth()+1));
            $("#calendarYear").append(date.getFullYear());
            // console.log(date.getMonth()+1);
            // console.log(date.getFullYear());
            
            // console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
            console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
            console.log(new Date(date.getFullYear(), date.getMonth(), 1));
            // build calendar on current date
            buildCalendar(new Date(date.getFullYear(), date.getMonth()+1, 0), new Date(date.getFullYear(), date.getMonth(), 1));

            $("#moveLeft").click(function(){
                var new_month = ($("#calendarMonth").html() === "January") ? "December" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] -1);
                if( new_month === "December" ){
                    $("#calendarYear").html(parseInt($("#calendarYear").html()) - 1); 
                }
                $("#calendarMonth").html(new_month);
                $("#fill_input").empty();
                buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                    new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
                console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
                console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
            });

            $("#moveRight").click(function(){
                var new_month = ($("#calendarMonth").html() === "December") ? "January" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] +1);
                if( new_month === "January" ){
                    $("#calendarYear").html(parseInt($("#calendarYear").html()) + 1); 
                }
                $("#calendarMonth").html(new_month);
                $("#fill_input").empty();
                buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                    new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
                // console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
                // console.log(new Date(parseInt($("#calendarYear").html()), dayTName[$("#calendarMonth").html()]-1,1));
            });
            
        });

        $.ajax(
                {
                    type:'GET',
                    url: 'http://127.0.0.1:8000/admin/home/daily_waitlist/ajax_my_view/',
                    data: {
                        "month": (date.getMonth()+1),
                        "year": date.getFullYear(),
                    },
                    type: "GET",
                    success: function(data){
                        console.log(data);
                        for(var i= 0; i < data.date_query_from_db.length; i++){
                            let day_number_slice = data.date_query_from_db[i].date_entered.slice(8);
                            if(day_number_slice[0] === "0"){
                                day_number_slice = data.date_query_from_db[i].date_entered.slice(9);
                            }
                            let target_string = "#day_entry" + day_number_slice;
                            console.log(target_string);
                            // $(target_string).addClass("appointment-day");
                            $("tbody" ).on("click", "tr #day_entry1" , function (){
                                $(this).text("here"); 
                            });
                            $(target_string).text("here");
                        }
                    }
                }
            );

        function getKeyByValue(object, value) {
            return Object.keys(object).find(key => object[key] === value);
        }

        function buildCalendar(calendarDays, calendarActual){

            let actualCount = 0;
            let dayCount = 1;
            for(let j=0; j < 6;j++){
                let table_row = "<tr id='week_start" + j + "'></tr>";
                $("#fill_input").append(table_row);
                if(j === 0){
                    // add in blank spaces for first week
                    
                    var days_move = (calendarActual.getDay(calendarActual.getDate())-1 > 0 ) ? calendarActual.getDay(calendarActual.getDate()) : calendarActual.getDay(calendarActual.getDate()); 
                    for( var k=0; k < days_move;k++ ){
                        var blank_day = "<td class='td_day' id ='day_entry'> </td>";
                        $("#week_start0").append(blank_day);
                        actualCount++;
                    }
                }
                while(actualCount < 7 && !(dayCount > calendarDays.getDate()) ){
                    var div_day = "<td class='td_day' id ='day_entry"+ dayCount + "'>" + dayCount + "</td>";
                    $("#week_start"+ j + "").append(div_day);
                    actualCount++;
                    dayCount++;
                }
                actualCount = 0;
            }
        }
    </script>

<!DOCTYPE html>

<html lang="en-us" >
<head>
<title> | Django site admin</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">




    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
    

<meta name="robots" content="NONE,NOARCHIVE">
</head>


<body class=""
  data-admin-utc-offset="0">

<!-- Container -->
<div id="container">

    
    <!-- Header -->
    <div id="header">
        <div id="branding">
        
<h1 id="site-name"><a href="/admin/">Django administration</a></h1>

        </div>
        
        
        
        
    </div>
    <!-- END Header -->
    
    <div class="breadcrumbs">
    <a href="/admin/">Home</a>
    
    </div>
    
    

    
        
    

    <!-- Content -->
    <div id="content" class="colM">
        
        
        
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <scriptsrc="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/admin_calendar.css">
    
    
    <div class="container">
        <button class="btn btn-secondary" id="moveLeft">←</button>
        <h1 id="calendarMonth"></h1>
        <h1 id="calendarYear"></h1>
        <button class="btn btn-secondary" id="moveRight">→</button>
        <table class = "table table-hover thead-light">
            <th class="day-name">Sun</th>
            <th class="day-name">Mon</th>
            <th class="day-name">Tue</th>
            <th class="day-name">Wed</th>
            <th class="day-name">Thu</th>
            <th class="day-name">Fri</th>
            <th class="day-name">Sat</th>
            <tbody id="fill_input">
            </tbody>
        </table>
    </div>
    <script >

        
        var dayToName = {"January":1,"February":2,"March":3,"April":4,"May":5,"June":6,"July":7,"August":8,"September":9,"October":10,"November":11,"December":12};
        // set h1's to current date
        var date = new Date();
        let current_date_format = date.getFullYear() + "-" + (date.getMonth()+1);
        
        
        

        $(function(){
            $("#calendarMonth").html(getKeyByValue(dayToName, date.getMonth()+1));
            $("#calendarYear").append(date.getFullYear());
            // console.log(date.getMonth()+1);
            // console.log(date.getFullYear());
            
            // console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
            console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
            console.log(new Date(date.getFullYear(), date.getMonth(), 1));
            // build calendar on current date
            buildCalendar(new Date(date.getFullYear(), date.getMonth()+1, 0), new Date(date.getFullYear(), date.getMonth(), 1));

            $("#moveLeft").click(function(){
                var new_month = ($("#calendarMonth").html() === "January") ? "December" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] -1);
                if( new_month === "December" ){
                    $("#calendarYear").html(parseInt($("#calendarYear").html()) - 1); 
                }
                $("#calendarMonth").html(new_month);
                $("#fill_input").empty();
                buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                    new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
                console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
                console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
            });

            $("#moveRight").click(function(){
                var new_month = ($("#calendarMonth").html() === "December") ? "January" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] +1);
                if( new_month === "January" ){
                    $("#calendarYear").html(parseInt($("#calendarYear").html()) + 1); 
                }
                $("#calendarMonth").html(new_month);
                $("#fill_input").empty();
                buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                    new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
                // console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
                // console.log(new Date(parseInt($("#calendarYear").html()), dayTName[$("#calendarMonth").html()]-1,1));
            });
            
        });

        $.ajax(
                {
                    type:'GET',
                    url: 'http://127.0.0.1:8000/admin/home/daily_waitlist/ajax_my_view/',
                    data: {
                        "month": (date.getMonth()+1),
                        "year": date.getFullYear(),
                    },
                    type: "GET",
                    success: function(data){
                        console.log(data);
                        for(var i= 0; i < data.date_query_from_db.length; i++){
                            let day_number_slice = data.date_query_from_db[i].date_entered.slice(8);
                            if(day_number_slice[0] === "0"){
                                day_number_slice = data.date_query_from_db[i].date_entered.slice(9);
                            }
                            let target_string = "#day_entry" + day_number_slice;
                            console.log(target_string);
                            // $(target_string).addClass("appointment-day");
                            $("tbody" ).on("click", "tr #day_entry1" , function (){
                                $(this).text("here"); 
                            });
                            $(target_string).text("here");
                        }
                    }
                }
            );

        function getKeyByValue(object, value) {
            return Object.keys(object).find(key => object[key] === value);
        }

        function buildCalendar(calendarDays, calendarActual){

            let actualCount = 0;
            let dayCount = 1;
            for(let j=0; j < 6;j++){
                let table_row = "<tr id='week_start" + j + "'></tr>";
                $("#fill_input").append(table_row);
                if(j === 0){
                    // add in blank spaces for first week
                    
                    var days_move = (calendarActual.getDay(calendarActual.getDate())-1 > 0 ) ? calendarActual.getDay(calendarActual.getDate()) : calendarActual.getDay(calendarActual.getDate()); 
                    for( var k=0; k < days_move;k++ ){
                        var blank_day = "<td class='td_day' id ='day_entry'> </td>";
                        $("#week_start0").append(blank_day);
                        actualCount++;
                    }
                }
                while(actualCount < 7 && !(dayCount > calendarDays.getDate()) ){
                    var div_day = "<td class='td_day' id ='day_entry"+ dayCount + "'>" + dayCount + "</td>";
                    $("#week_start"+ j + "").append(div_day);
                    actualCount++;
                    dayCount++;
                }
                actualCount = 0;
            }
        }
    </script>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

        
        <br class="clear">
    </div>
    <!-- END Content -->

    <div id="footer"></div>
</div>
<!-- END Container -->

</body>
</html>

Answer 1

Для тех, кто ищет решение, идея делегирования @ Barmar - правильный ответ. Поэтому для размещенного кода создайте некоторую переменную, сохраните ответ Json на эту переменную, а затем получите доступ к данным Json внутри вашего $ (function () {}), где вы можете быть уверены, что весь контент будет сгенерирован и документ готов. Для этого примера конкретно:

<script >


    var dayToName = {"January":1,"February":2,"March":3,"April":4,"May":5,"June":6,"July":7,"August":8,"September":9,"October":10,"November":11,"December":12};
    // set h1's to current date
    var date = new Date();
    let current_date_format = date.getFullYear() + "-" + (date.getMonth()+1);
    let data_from_db;

    $.ajax(
            {
                type:'GET',
                url: 'http://127.0.0.1:8000/admin/home/daily_waitlist/ajax_my_view/',
                data: {
                    "month": (date.getMonth()+1),
                    "year": date.getFullYear(),
                },
                type: "GET",
                success: function(data){
                    data_from_db = data;

                }
            }
        );

    $(function(){
        $("#calendarMonth").html(getKeyByValue(dayToName, date.getMonth()+1));
        $("#calendarYear").append(date.getFullYear());
        // console.log(date.getMonth()+1);
        // console.log(date.getFullYear());

        // console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
        console.log(new Date(date.getFullYear(), date.getMonth()+1, 0));
        console.log(new Date(date.getFullYear(), date.getMonth(), 1));
        // build calendar on current date
        buildCalendar(new Date(date.getFullYear(), date.getMonth()+1, 0), new Date(date.getFullYear(), date.getMonth(), 1));

        $("#moveLeft").click(function(){
            var new_month = ($("#calendarMonth").html() === "January") ? "December" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] -1);
            if( new_month === "December" ){
                $("#calendarYear").html(parseInt($("#calendarYear").html()) - 1); 
            }
            $("#calendarMonth").html(new_month);
            $("#fill_input").empty();
            buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
            console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
            console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
        });

        $("#moveRight").click(function(){
            var new_month = ($("#calendarMonth").html() === "December") ? "January" : getKeyByValue( dayToName, dayToName[$("#calendarMonth").html()] +1);
            if( new_month === "January" ){
                $("#calendarYear").html(parseInt($("#calendarYear").html()) + 1); 
            }
            $("#calendarMonth").html(new_month);
            $("#fill_input").empty();
            buildCalendar(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0),
                new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()]-1,1));
            // console.log(new Date(parseInt($("#calendarYear").html()), dayToName[$("#calendarMonth").html()],0));
            // console.log(new Date(parseInt($("#calendarYear").html()), dayTName[$("#calendarMonth").html()]-1,1));
        });


        id_change(data_from_db);
    });



    function getKeyByValue(object, value) {
        return Object.keys(object).find(key => object[key] === value);
    }

    function id_change(data){
        for(var i= 0; i < data.date_query_from_db.length; i++){
            let day_number_slice = data.date_query_from_db[i].date_entered.slice(8);
            if(day_number_slice[0] === "0"){
                day_number_slice = data.date_query_from_db[i].date_entered.slice(9);
            }
            let target_string = "#day_entry" + day_number_slice;
            console.log(target_string);
            // $(target_string).addClass("appointment-day");
            //$("tbody" ).on("click", "tr #day_entry1" , function (){
            //    $(this).text("here"); 
            //});
            $(target_string).addClass("appointment-day");
        }
    }

    function buildCalendar(calendarDays, calendarActual){

        let actualCount = 0;
        let dayCount = 1;
        for(let j=0; j < 6;j++){
            let table_row = "<tr id='week_start" + j + "'></tr>";
            $("#fill_input").append(table_row);
            if(j === 0){
                // add in blank spaces for first week

                var days_move = (calendarActual.getDay(calendarActual.getDate())-1 > 0 ) ? calendarActual.getDay(calendarActual.getDate()) : calendarActual.getDay(calendarActual.getDate()); 
                for( var k=0; k < days_move;k++ ){
                    var blank_day = "<td class='td_day' id ='day_entry'> </td>";
                    $("#week_start0").append(blank_day);
                    actualCount++;
                }
            }
            while(actualCount < 7 && !(dayCount > calendarDays.getDate()) ){
                var div_day = "<td class='td_day' id ='day_entry"+ dayCount + "'>" + dayCount + "</td>";
                $("#week_start"+ j + "").append(div_day);
                actualCount++;
                dayCount++;
            }
            actualCount = 0;
        }
    }
</script>