Clicking on a class doesn't work?

Question

JavaScript

$(".user-row-id").click(function(e) {
    e.preventDefault();
    var link = $(this);
    uid = link.attr("data-user-id");
    $.ajax({
        type: "GET",
        url: "getOtpInfo.php", 
        data: {"userId": uid},
        cache: false,                       
        success: function(response){
            var data = JSON.parse(response);
            console.log(data);
            $('.vacation-row').remove();
            for(var i=0;i<data.length;i++) {
                let tr = $('<tr class="vacation-row">'
                            +'<td align="center">'
                               +'<a href="' + data[i]['ID_Vacation'] + '" data-vacation_redaction-id="' + data[i]['ID_Vacation'] + '" id="polojit" class="btn btn-default data-vacation_redaction-id" data-toggle="modal" data-target="#redaction_vacation"><em class="fa fa-pencil"></em></a>'
                               +'<a data-vacation-id="' + data[i]['ID_Vacation'] + '" class="btn btn-danger data-vacation-id" data-toggle="modal" data-target="#dell_vacation"><em class="fa fa-trash"></em></a>'
                               
                            +'</td>'
                            +'<td>' + data[i]['Start_date'] + '</td>'
                            +'<td>' + data[i]['End_date'] + '</td>'
                            +'<td>' + data[i]['Day_numb'] + '</td>'
                            +'<td>' + data[i]['Unspoken_days'] + '</td>'
                            +'<td>' + data[i]['Main'] + '</td>'
                            +'<td>' + data[i]['Secondary'] + '</td>'
                            +'<td>' + data[i]['Number_decree'] + '</td>'
                            +'<td>' + data[i]['Date_decree'] + '</td>'
                        +'</tr>');
                tr.appendTo('#table-content');
            }  
            }
        });
});

Good evening. Help does not work click on the class. Thanks for the help.

The bottom line is that I click on the user-row-id class and Ajax returns JSON that was parsed and in a loop we output the data to the table, completing the . Further, after the table appeared, I also displayed buttons in it, or rather, this is a link in the form of a button, this link has the data-vacation_redaction-id class outputs a message. The error is not shown at all, as if he does not see the class. What could be the problem? How to solve it? Here is a click on the class data-vacation_redaction-id<td>

$(".data-vacation_redaction-id").click(function(e){
    e.preventDefault();

    alert("Проверка");
});

Answer 1

The click binds to existing elements, and these are added later, so no handler is attached to them. Need to write like this

$("#table-content").on("click", ".data-vacation_redaction-id", function () {
    e.preventDefault();

    alert("Проверка");
});

those. here we bind a click to #table-content, but process it only if its event.target is equal to the block we need (i.e. if .data-vacation_redaction-id was clicked).