2

Tenho um Bootstrap dropdown onde uma lista dinâmica é carregada quando o usuário abre o mesmo. O problema é que cada vez que existe uma iteração, por exemplo quando o usuário apaga um item da lista, o dropdown é fechado. Quero que o dropdown seja fechado somente quando o usuário clica no botão para fechar o mesmo.

Como evitar que em cada iteração o dropdown seja fechado automaticamente?

Código para remover um item da lista.

$('#containerNotice').on('click', 'button[data-process="removeNotice"]', function(event) {  
    event.preventDefault();
    var noticeId = $(this).attr('data-notice-id');      
    $.ajax({
        crossDomain: true,
        crossOrigin:true,   
        type:"post",
        url: 'src/inc/notice/',
        data: { noticeId: noticeId, DataProcess: 'remove' },
        dataType: "json",
        success: function(data) {
            switch(data.status) {                   
                case 'success':                     
                    $('button[data-notice-id="'+noticeId+'"]').prop("disabled", true).css('opacity', '0.2');
                    break;                      
            }       
        }                   
    });         
});
6
  • Coloca uma amostra do código para ver como é feita a remoção do item.
    – Sam
    Commented 25/09/2018 às 2:31
  • Sam.. editei o post original para inserir o código
    – RRV
    Commented 25/09/2018 às 2:35
  • vai que é tuuuuuua @tiosam
    – user60252
    Commented 25/09/2018 às 2:37
  • O ideal é postar código que possamos usar para reproduzir o problema.
    – user60252
    Commented 25/09/2018 às 2:41
  • 1
    Tenta isso meu jovem: $(document).on('click', '.dropdown-item', function(event){ event.stopPropagation(); });
    – Sam
    Commented 25/09/2018 às 2:44

3 Respostas 3

3

Ao clicar em um item da lista, ele irá disparar um evento que faz com que o dropdown seja fechado. Para evitar isso, use event.stopPropagation() no document apontando para a classe dos itens, que no caso é a .dropdown-item:

$(document).on('click', '.dropdown-item', function(event){ 
   event.stopPropagation();
});

Isso fará com que não seja disparado outro evento atribuído ao dropdown (bubbling) que faz com que ele se feche.

1
  • estou com esse erro, inseri o código acima porém não funcionou... No meu caso eu tenho vários checkbox e queria ter a liberdade de escolher eles sem ter que ficar clicando toda hora no icone do dropdown. Commented 29/08/2019 às 18:25
0

Sei que o tópico é antigo mas talvez ainda ajude quem estiver pesquisando esse erro hoje em dia assim como aconteceu comigo. Mesmo na versão 5.0 do Bootstrap eu também me deparei com este erro.

A dica que eu dou é observar os links das dependências dos arquivos bootstrap.min.js. No meu caso esse era o problema, muitas vezes além da ordem dos links você pode estar duplicando a dependência e entrando em conflito. Faça testes comentando de 1 por 1 os links e veja qual é o problema. No meu caso era o link para o arquivo bootstrap.bundle.min.js que estava conflitando com o arquivo bootstrap.min.js, certifíque-se de deixar o arquivo correto da versão que está utilizando. Espero ter ajudado. Abraço.

-2

Me deparei com esse mesmo problema e a solução que encontrei foi colocar uma condicional no style do dropdown-menu, em que o estado é controlado pelo onclick do button "dropdown-toggle".

style={{ display: `${this.state.openMenu ? 'block' : 'none'}` }}
1
  • Outra alternativa que encontrei na documentação e a mais correta, é usar o <form> Commented 28/09/2021 às 20:59

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 .