Javascript function works only once

Question

I would like some help with these functions. I would like the last td to change every time it is clicked between active and inactive. But it only works the first time clicked after it doesn’t work anymore. Can anyone help me? Follow code example below.

Thank you.

	$(document).ready(function(){	
    $('#tabela tbody tr').each(function(i, linha) {
       $(this).find('a[name=botaoAtivo]').click(function() {
          var teste = $(linha).find('td:eq(4)');
          console.log('Teste: ' + teste);
          teste.html("<a name='botaoInativo' href ='#'><span class='badge badge-danger'>Inativo</span></a>");
				});
	$(this).find('a[name=botaoInativo]').click(function() {
	  var teste2 = $(linha).find('td:eq(4)');
	  console.log('Teste2: ' + teste2);
	  teste2.html("<a name= 'botaoAtivo' href ='#'><span class='badge badge-success'>Ativo</span></a>");
         });
       });
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "tabela">
  <thead>
    <tr>
      <th>#</th>
      <th>Fantasia</th>
      <th>Cidade</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Cliente1</td>
      <td>Santa Cruz do Sul/RS</td>
      <td>[e-mail]</td>
      <td><a name= "botaoAtivo" href ="#">Ativo</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cliente2</td>
      <td>Santa Cruz do Sul/RS</td>
      <td>[e-mail]</td>
      <td><a name="botaoInativo" href ="#">Inativo</a></td>
    </tr>

Answer 1

EDIT based on the comments

In this case, to follow the way it’s being done, I would change the code to:

$(document).ready(function() {
  $(this).find('#tabela a[name=botaoExemplo]').click(function() {
if ($(this).hasClass("ativo")) {
  $(this).removeClass("ativo").addClass("inativo");
  $(this).html("inativo");
}
else {
  $(this).removeClass("inativo").addClass("ativo");
  $(this).html("ativo");
}
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tabela">
  <thead>
<tr>
  <th>#</th>
  <th>Fantasia</th>
  <th>Cidade</th>
  <th>Email</th>
  <th>Status</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>1</td>
  <td>Cliente1</td>
  <td>Santa Cruz do Sul/RS</td>
  <td>[e-mail]</td>
  <td><a name="botaoExemplo" href="#" class="ativo">Ativo</a></td>
</tr>
<tr>
  <td>2</td>
  <td>Cliente2</td>
  <td>Santa Cruz do Sul/RS</td>
  <td>[e-mail]</td>
  <td><a name="botaoExemplo" href="#" class="inativo">Inativo</a></td>
</tr>
  </tbody>
</table>

Fiddle: https://jsfiddle.net/61ty4sw2/

Summary of modifications:

• uses the same name in all cases, for simplicity
• uses classes to control the state
• changes only control classes and text within the link

---

(original)

The function works only once pq the DOM is analyzed in your ready Document. As you change the DOM later, with the click, the DOM is not reevaluated. To solve this quickly and simply you can do the button as follows: <a htef="#" onclick="ativar()">Inativo</a> and write on and inactivate functions in a block <script>.

Answer 2

Try it this way.

$(document).ready(function() {
  $('#tabela').on('click', 'tr', function() {
    const status = $(this).find('[name]').attr('name')

    if (status == 'botaoAtivo') {
      $(this).find('[name]').attr('name', 'botaoInativo').html('Inativo')
    } else {
      $(this).find('[name]').attr('name', 'botaoAtivo').html('Ativo')
    }
    
  });
})

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


<table id="tabela">
  <thead>
    <tr>
      <th>#</th>
      <th>Fantasia</th>
      <th>Cidade</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Cliente1</td>
      <td>Santa Cruz do Sul/RS</td>
      <td>[e-mail]</td>
      <td><a name="botaoAtivo" href="#">Ativo</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cliente2</td>
      <td>Santa Cruz do Sul/RS</td>
      <td>[e-mail]</td>
      <td><a name="botaoInativo" href="#">Inativo</a></td>
    </tr>

Answer 3

You could do something like:

$(document).ready(function() {
  $(".alterarEstado").on("click", function() {
    if ($(this).find("span").text() === "Ativo") {
      $(this).find("span").text("Inativo");
      $(this).find("span").toggleClass("badge-success badge-danger");
    } else {
      $(this).find("span").text("Ativo");
      $(this).find("span").toggleClass("badge-success badge-danger");
    }
  });
});

Changing your button to something like:

<td>
    <a class="alterarEstado" href="#">
        <span class='badge badge-danger'>Inativo</span>
    </a>
</td>

Instead of using the attribute name use a class and record the event in this class.

EXAMPLE