Javascript function works only once

Asked

Viewed 160 times

-2

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>[email protected]</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>[email protected]</td>
      <td><a name="botaoInativo" href ="#">Inativo</a></td>
    </tr>

  • It Worked So Thank You Very Much!

3 answers

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>[email protected]</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>[email protected]</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>.

  • I’ve tried this way only it changes all the lines. I can’t change only the line clicked

0

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>[email protected]</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>[email protected]</td>
      <td><a name="botaoInativo" href="#">Inativo</a></td>
    </tr>

0

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.