Button click event is only held once in jQuery

Asked

Viewed 134 times

0

So I have a button that is generated dynamically via AJAX.

I made an event in jQuery that when clicking the button, it runs one of the conditions that are inside the event (in IF and Else If).

However, the button only executes one event at a time. If I want to click the button again for him to hold another event, the event doesn’t happen unless I refresh the page.

Let me try to explain: I have a button that shows the Activity Status, when I click on another "Reopen Activity" button, the status is to change. And if I click the "Reopen Activity" button again, it is by Status being changed again. Only the change is only happening once.

What should happen:

You clicked on the "Reopen" button (Status went from Completed to Started), clicked on the "Reopen" button Again (Status went from Started to Pending).

To occur the above fact, you have to click "Reopen", Reload Page, and click "Reopen" again.

I’ll show you the code and a system image to see if you can get a sense. 

$(document).on("click",".REABRIRATIVIDADE", function(e){           
    var sts = $(this).attr('name');
    var codigo_empr = $(this).val();
    
    //PASSAR BOTÃO DE CONCLUIDO PARA INICIADO       
    if(sts == "CONCLUIDO")
    {
        $("tr#"+codigo_empr+" button.reabriratividade").html("INICIADO");
        //andrews//////////////////////////////
        $("tr#"+codigo_empr+" button.reabriratividade").css('background-color','rgb(236, 200, 70)');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border','1px solid gray'); 
        $("tr#"+codigo_empr+" button.reabriratividade").css('color','royalblue');
        $("tr#"+codigo_empr+" button.reabriratividade").css('font-weight','bold');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border-radius','5px');
    //andrews//////////////////////////////
        $("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn INICIADO');  
      
        var novo_status = "INICIADO";
        var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
        $('.REABRIRATIVIDADE').attr('name') = "INICIADO";
    }
    //PASSAR BOTÃO DE CONCLUIDO_VENCIDO PARA INICIADO_VENCIDO 
    else if(sts == "CONCLUIDO_VENCIDO")
    {
        $("tr#"+codigo_empr+" button.reabriratividade").html("INICIADO_VENCIDO");
        $("tr#"+codigo_empr+" button.reabriratividade").css('background-color','rgb(196, 95, 49)');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border','1px solid gray'); 
        $("tr#"+codigo_empr+" button.reabriratividade").css('color','white');
        $("tr#"+codigo_empr+" button.reabriratividade").css('font-weight','bold');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border-radius','5px');
        //andrews//////////////////////////////
        $("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn INICIADO_VENCIDO');  
  
        var novo_status = "INICIADO_VENCIDO"; 
        var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
        $('.REABRIRATIVIDADE').attr('name') = "INICIADO_VENCIDO";  
    }
    //PASSAR BOTÃO DE INICIADO PARA PENDENTE  
    else if(sts == "INICIADO")
    {
        $("tr#"+codigo_empr+" button.reabriratividade").html("PENDENTE");
        $("tr#"+codigo_empr+" button.reabriratividade").css('background-color','RoyalBlue');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border','1px solid gray');
        $("tr#"+codigo_empr+" button.reabriratividade").css('color','white');
        $("tr#"+codigo_empr+" button.reabriratividade").css('font-weight','bold');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border-radius','5px');
        $("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn PENDENTE');  
      
        var novo_status = "PENDENTE";
        var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);  
        $('.REABRIRATIVIDADE').attr('name') = "PENDENTE";
    }
    else if(sts == "INICIADO_VENCIDO")
    {
        $("tr#"+codigo_empr+" button.reabriratividade").html("VENCIDO");    
        $("tr#"+codigo_empr+" button.reabriratividade").css('background-color','rgb(165, 42, 42)');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border','px solid gray');
        $("tr#"+codigo_empr+" button.reabriratividade").css('color','white');
        $("tr#"+codigo_empr+" button.reabriratividade").css('font-weight: bold;','bold');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border-radius','5px');
        $("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn VENCIDO');   
      
        var novo_status = "VENCIDO";
        var reabrir = reabrirAtividade(sts, novo_status, codigo_empr); 
        $('.REABRIRATIVIDADE').attr('name') = "VENCIDO"; 
    }
});
      


function reabrirAtividade(sts, novo_status, codigo_empr)
{
	
	$.ajax
	({			
		url:"banco/pagina-minhas-tarefas/reabrir-atividades.php",		
		type:"POST",
		data:{sts:sts, novo_status:novo_status, codigo_empr: codigo_empr},
		async:false
		
	}).done(function(data)
	{					
		
	}).fail(function()
	{
		
	}).always(function()
	{
		
	});	
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<?php

	date_default_timezone_set('America/Sao_Paulo');

	// CHAMANDO O ARQUIVO DE CONEXÃO AO BANCO
	require_once("../conexao/conexao-com-banco.php"); 
	
	//CONSULTA NO BANCO QUE MUDA O STATUS NO BANCO DE DADOS 
		
	session_start();

	$usuario_reabrir_atividades = $_SESSION["nome"];
	
	$sts = $_POST['sts'];
	$novo_status = $_POST['novo_status'];
	$codigo_empr = $_POST['codigo_empr'];
	
	if($sts == "CONCLUIDO" OR $sts == "CONCLUIDO_VENCIDO")
	{
		$inserir_abrir_atividade = "UPDATE tbl_atividades SET STATUS = '{$novo_status}', DT_FIM = null WHERE codigo = $codigo_empr";
		$resultado_inserir_abrir_atividade = mysqli_query($conecta, $inserir_abrir_atividade);
	}
	
	else if($sts == "INICIADO" OR $sts == "INICIADO_VENCIDO")
	{
		$inserir_abrir_atividade = "UPDATE tbl_atividades SET STATUS = '{$novo_status}', DT_INICIO = null WHERE codigo = $codigo_empr";
		$resultado_inserir_abrir_atividade = mysqli_query($conecta, $inserir_abrir_atividade);
	}
	
	//SEGURANÇA - TESTANDO SE A QUERY FOI EXECUTADA
	if(!$resultado_inserir_abrir_atividade)
	{
		die("Erro no Inserte do Reabrir Atividade");
		
	}

?>

inserir a descrição da imagem aqui

I hope I’ve been able to explain this nicely. Thank you!

php javascript jquery ajax

  • The name of your button never changes, so it will always fall in the same condition as if. Maybe that’s what’s giving the impression that the event isn’t happening

  • I made the inclusion of "Names" in the events. But it has not worked yet.

1 answer

1


As I said in the comment, you were not changing the name attribute of your button, so you had the impression that the event was only triggered once. You must change this name every click of the button, so:

$(document).on("click",".REABRIRATIVIDADE", function(e){   
    var elemento = $(this);
    var sts = elemento.attr('name');
    var codigo_empr = $(this).val();

    //PASSAR BOTÃO DE CONCLUIDO PARA INICIADO       
    if(sts == "CONCLUIDO")
    {
        $("tr#"+codigo_empr+" button.reabriratividade").html("INICIADO");
        //andrews//////////////////////////////
        $("tr#"+codigo_empr+" button.reabriratividade").css('background-color','rgb(236, 200, 70)');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border','1px solid gray'); 
        $("tr#"+codigo_empr+" button.reabriratividade").css('color','royalblue');
        $("tr#"+codigo_empr+" button.reabriratividade").css('font-weight','bold');
        $("tr#"+codigo_empr+" button.reabriratividade").css('border-radius','5px');
        //andrews//////////////////////////////
        $("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn INICIADO');  

        //Altera o atributo name do elemento
        elemento.attr('name', "INICIADO");

        var novo_status = "INICIADO";
        var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
    }
    //...continuação da implementaçaõ dos else/if
});

Another problem is that you are using the .attr() for ALTER the class of the element, I imagine your need is just to change its class to the next step, or you could also add the class .REABRIRATIVIDADE together with the others, in this way:

$("tr#"+codigo_empr+" button.reabriratividade").attr('class', 'btn INICIADO REABRIRATIVIDADE');

  • Jrd, it didn’t work out. Keep doing only one event at a time.

  • @Thiagopetherson I did the code correction, take a look

  • Thank you. Your observation was great. You just put the wrong class there. You put 'RESOURCEFULNESS' and it was 'resourcefulness'. But your answer already helped me a lot anyway. Thanks!

  • Jrd, there’s been a problem here. When I filter the Status, for example to only appear the Activities with Status "COMPLETED" or "CONCLUIDO_VENCIDO", your rule does not work.

  • Jrd. When I load the page the first time, it works fine. However, when I do a new search or do a filter search in Status, it no longer works.

  • @Thiagopetherson You changed the rule to add class in other if’s?

  • I changed yes. As you had quoted.

  • the problem is that the situation I mentioned only happens the first time you filter with the "Search" button. If I filter again, the status change does not work when I click on the "Reopen" button (which changes the status).

  • Come to chat @Thiagopetherson

Show 4 more comments

Browser other questions tagged php javascript jquery ajax

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