Select row from table

Question

I have the following table, js and Cs:

HTML:

var tr = $('table tr:not(:first-child)');
tr.on('click', function () {
    var self = this;
    tr.each(function(){
        if(this == self) $(this).toggleClass('colorir');
        else $(this).removeClass('colorir');
    })
});

.colorir {
    background-color:#fcc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table id="alerta" class="table">
    <thead>
        <tr> 
            <th class="table__heading">De</th>
            <th class="table__heading">Assunto</th>
            <th class="table__heading">Conteúdo</th>
            <th class="table__heading">Estado</th>
            <th class="table__heading">Recebido</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row">
            <td class="table__content" data-heading="De"></td>
            <td class="table__content" data-heading="Assunto"></td>
            <td class="table__content" data-heading="Conteúdo"></td>
            <td class="table__content" data-heading="Estado"></td>
            <td class="table__content" data-heading="Recebido"></td>                                        
        </tr>
    </tbody>
</table>

My table is mounted dynamically in this way:

$.getJSON('./alertas', function (data) {

    var linha = ``;
    var nomede = '';
    for (var i = 0; i < data.length; i++) { 
       Id = data[i][0];
       De = data[i][1];
       Assunto = data[i][2];
       Conteudo = data[i][3];
       Prioridade = data[i][4];
       Hora = data[i][5];
       Data = data[i][6];
       Email = data[i][7];
       Tipo = data[i][8];
       Para = data[i][9];
       Status = data[i][10];

        if(nomede != Data){
       linha += `<tr class="table__row">       
       <td colspan="5" style="background-color:#fcc;" class="table__content" data-heading="Recebido">Recebido: ${ Data }</td>       
       </tr>`
       nomede = Data
       }
       
       linha += `<tr class="table__row">             
       <td class="table__content" data-heading="De" ${ Status } != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%"'>${ De }</td> 
       <td class="td-info table__content" data-heading="Assunto" data-alerta="${ Id }, ${ Para }"  ${ Status } != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '>${ Assunto }</td>
       <td class="table__content" data-heading="Conteúdo" ${ Status } != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%"'>${ Conteudo }</td> 
       <td class="table__content" data-heading="Estado" ${ Status } != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%"'>${ Prioridade }</td> 
       <td class="table__content" data-heading="Recebido" ${ Status } != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%"'>${ Hora }</td> 
       </tr>`; 
    }
    
    $("#alerta tbody").html(linha);
}); 

But when I run and write the table, I click on the td and does not select the line. What will be the reason why the code does not work?

I followed this example

Answer 1

I made relevant modifications only in the coloring part, the explanation is in the comments.

$(function() {
        // Monitora o evento mesmo que a linha seja criada dinamicamente
        $('#alerta').find('tbody').on('click', 'tr', function() {
            $('.colorir').removeClass('colorir'); // Remove a cor, não importa onde
            $(this).addClass('colorir'); // Adiciona somente na linha clicada
        });
});

.colorir {
    background-color: #fcc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="alerta" class="table">
    <thead>
        <tr>
            <th class="table__heading">De</th>
            <th class="table__heading">Assunto</th>
            <th class="table__heading">Conteúdo</th>
            <th class="table__heading">Estado</th>
            <th class="table__heading">Recebido</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row">
            <td class="table__content" data-heading="De">aaaa</td>
            <td class="table__content" data-heading="Assunto">bbb</td>
            <td class="table__content" data-heading="Conteúdo">cccc</td>
            <td class="table__content" data-heading="Estado">dddd</td>
            <td class="table__content" data-heading="Recebido">eeeeeeeee</td>
        </tr>
        <tr class="table__row">
            <td class="table__content" data-heading="De">aaaa</td>
            <td class="table__content" data-heading="Assunto">bbb</td>
            <td class="table__content" data-heading="Conteúdo">cccc</td>
            <td class="table__content" data-heading="Estado">dddd</td>
            <td class="table__content" data-heading="Recebido">eeeeeeeee</td>
        </tr>
        <tr class="table__row">
            <td class="table__content" data-heading="De">aaaa</td>
            <td class="table__content" data-heading="Assunto">bbb</td>
            <td class="table__content" data-heading="Conteúdo">cccc</td>
            <td class="table__content" data-heading="Estado">dddd</td>
            <td class="table__content" data-heading="Recebido">eeeeeeeee</td>
        </tr>
    </tbody>
</table>