html page does not interpret css class inserted on button at runtime

Question

I wrote the following code:

$(document).ready(function() {
  $(".addAssunto").click(function() {

    var tr = '<tr>' +
      '<td>' +
      '<input type="text" class="form-control no-border" name="AssuntosTopicos"' +
      'id="assuntosTopicos" value ="" />' +
      '</td>' +
      '<td>' +
      '<textarea class="form-control no-border scroll"' +
      'name="AssuntosComentario" id="assuntosComentario"></textarea>' +
      '</td>' +
      '<td class="w-10">' +
      '<button type="button" class="addAssunto btn btn-primary fa fa-plus" id="">' +
      ' Incluir</button>' +
      '</td>' +
      '</tr>';

    if ($(".addAssunto").hasClass("btn-primary")) {
      $(".addAssunto").removeClass("btn-primary").addClass("btn-danger remove");
      $(".addAssunto").html(" Excluir").removeClass("addAssunto");
    }
    $("#tblAssuntos").append(tr);
  });

  $(".remove").click(function() {
    $(this).parents("tr").remove();
  });
});

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

<table class="table table-bordered" id="tblAssuntos">
  <thead>
    <tr>
      <th>Tópicos</th>
      <th colspan="2">Comentários / Ações necessárias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control no-border" name="AssuntosTopicos" id="assuntosTopicos" value="" /></td>
      <td><textarea class="form-control no-border scroll" name="AssuntosComentario" id="assuntosComentario"></textarea></td>
      <td class="w-10"><button type="button" class="addAssunto btn btn-primary center-block fa fa-plus" id=""> Incluir</button></td>
    </tr>
  </tbody>
</table>

When I click the add button a row is created correctly and the add button becomes Delete. But even after removing the classes . addAssunto of the buttons they continue calling $(".addAssunto").click and the one that still has the class the page does not understand and calls no action.

In short, the button I add dynamically via append does not work and the buttons I remove class . addAssunto via Jquery "ignore" the removal.

I wrote "ignore" because inspecting the page I see that the class is removed from the tag, but in practice it is as if it is still there.

Could someone please guide me?

Grateful.

Answer 1

$(document).on('click','.addAssunto',function() {

    var tr =  '<tr><td><input type="text" class="form-control no-border" name="AssuntosTopicos" id="assuntosTopicos" value="" /></td>';
        tr += '<td><textarea class="form-control no-border scroll" name="AssuntosComentario" id="assuntosComentario"></textarea></td>';
        tr += '<td class="w-10"><button type="button" class="addAssunto btn btn-primary center-block fa fa-plus" id=""> Incluir</button><button type="button" class="delAssunto btn btn-primary center-block fa fa-plus" id=""> excluir</button></td>';

      $(this).remove();
      $("tbody").append(tr);
  });

  $(document).on('click','.delAssunto',function() {
    var i = $('.delAssunto').index(this);
    if( i == ($('.delAssunto').parent().parent().length-1) )
    {
       $('.delAssunto').parent().parent().eq(i-1).find('td').eq(2).prepend('<button type="button" class="addAssunto btn btn-primary center-block fa fa-plus" id=""> Incluir</button>')
    }
    $(this).parent().parent().remove();
  })

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

<table class="table table-bordered" id="tblAssuntos">
  <thead>
    <tr>
      <th>Tópicos</th>
      <th>Comentários</th>
      <th>Ações necessárias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control no-border" name="AssuntosTopicos" id="assuntosTopicos" value="" /></td>
      <td><textarea class="form-control no-border scroll" name="AssuntosComentario" id="assuntosComentario"></textarea></td>
      <td class="w-10"><button type="button" class="addAssunto btn btn-primary center-block fa fa-plus" id=""> Incluir</button>
        <button type="button" class="delAssunto btn btn-primary center-block fa fa-plus" id=""> excluir</button></td>
    </tr>
  </tbody>
</table>

Answer 2

Solved

I applied the concept of Event Delegation and it worked.

In the end it was like this:

<table class="table table-bordered" id="tblAssuntos">
<thead>
    <tr>
        <th>Tópicos</th>
        <th colspan="2">Comentários / Ações necessárias</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="text" class="form-control no-border" name="AssuntosTopicos" id="assuntosTopicos" value="" /></td>
        <td><textarea class="form-control no-border scroll" name="AssuntosComentario" id="assuntosComentario"></textarea></td>
        <td><button type="button" class="btn btn-primary fa fa-plus" id="btnAssunto1"> Incluir</button></td>
    </tr>
</tbody>

$(document).ready(function () {
    $("tbody").on("click", "button", function() {
        var tr = '<tr>' +
                     '<td>' +
                         '<input type="text" class="form-control no-border" name="AssuntosTopicos"' +
                         'id="assuntosTopicos" value ="" />' +
                     '</td>' +
                     '<td>' +
                         '<textarea class="form-control no-border scroll"' +
                         'name="AssuntosComentario" id="assuntosComentario"></textarea>' +
                     '</td>' +
                     '<td>' +
                         '<button type="button" class="btn btn-primary fa fa-plus" id="">' +
                         ' Incluir</button>' +
                     '</td>' +
                 '</tr>';

        if ($(this).hasClass("btn-primary")) {
            $(this).removeClass("btn-primary").addClass("btn-danger");
            $(this).html(" Excluir");
            $("#tblAssuntos").append(tr);
            $("textarea").css("height", 34 + "px");
        } else if ($(this).hasClass("btn-danger"))
            $(this).parents("tr").remove();
    });
});