0

Ao clicar em um botão para deletar um item de uma lista usando função Javascript, o mesmo só executa a ação após o 2º clique. Gostaria de saber o que devo fazer para que a função funcione corretamente a partir do 1º clique.

Modal bootstrap

<!-- Modal - remover estado do serviço -->
<div class="modal bd-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Deseja remover este estado do serviço?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-remover-estado" onclick="return removerEstado();">Sim</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
            </div>
        </div>
    </div>
</div>

Função Javascript

function removerEstado(){
    $('#btn-remover-estado').click(function(){
        let estados = document.getElementById('lista-estados');
            estados.remove(estados.selectedIndex);
    });
}
2
  • 2
    Victor, aparentemente você ainda não entende como eventos funcionam em javascript. Quando você diz onclick=uma_funcao() você está dizendo para executar aquela função quando o elemento for clicado. Quando você faz $('#meu-id').click(uma_funcao) você está fazendo o mesmo só que de maneira diferente. Explico melhor sobre eventos e jQuery nesta resposta, caso se interesse. Commented 5/12/2019 às 18:14
  • Sim, Fernando. Minha habilidade com javascript ainda é bem baixa. Vou aproveitar a resposta que me indicou para entender mais sobre esse tema. Obrigado. Commented 5/12/2019 às 18:17

2 Respostas 2

3

Isso ocorre pois ao clicar a primeira vez você chama a função removerEstado() e chama a função do click, na segunda a função já foi chamada e consegue ser usada a função de click.

O correto seria fazer o seguinte.

$('#btn-remover-estado').click(function(){
    let estados = document.getElementById('lista-estados');
    estados.remove(estados.selectedIndex);
});
<button type="button" class="btn btn-danger" id="btn-remover-estado">Sim</button>

Ou

function removerEstado(){
    let estados = document.getElementById('lista-estados');
    estados.remove(estados.selectedIndex);
}
<button type="button" class="btn btn-danger" onclick="return removerEstado();">Sim</button>
1

O que esta ocorrendo é o seguinte, você esta criando seu botao com o atributo onclick passando uma função:

<button type="button" onclick="return removerEstado();">Sim</button>

Na sua função removerEstado toda vez que ela é chamada, é adicionado um outro evento de onclick (jQuery.click).

Ou seja:

1 vez clicado 
  chama removeEstado, Ela adiciona um evento de click pelo jQuery
2 vez clicado 
  chama removeEstado, Ela adiciona outro evento de click pelo jQuery
  chama em cascata os eventos adicionados pelo jQuery
    ou seja 1 e 2
3 vez clicado
  chama removeEstado, Ela adiciona outro evento de click pelo jQuery
  chama em cascata os eventos adicionados pelo jQuery
    ou seja 1 2 e 3.

Para você entender o que esta ocorrendo eu simplifiquei seu código, veja/execute ele abaixo:

var count = 0;
function removerEstado(){
    console.log('removerEstado()');
    
    /// ; Pega o elemento pelo ID e adiciona um evento de `onclick`
    $('#btn-remover-estado').click(function(){
        console.log(++count);
    });

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


<button type="button" class="btn btn-danger" id="btn-remover-estado" onclick="return removerEstado();">Sim</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .