Ao implementar URLs amigáveis com .htaccess, muitos desenvolvedores percebem que links usados apenas para ações JavaScript, como abrir modais do Bootstrap, deixam de funcionar corretamente. Isso acontece principalmente com links usando href="#" sem o uso do preventDefault().
O Problema
A mudança para URLs amigáveis alterou a forma como o navegador interpreta os caminhos da aplicação e, consequentemente, como ele trata âncoras e links internos.
1. Mudança no “Diretório” de Execução (Caminho Virtual)
Antes das URLs amigáveis, o acesso era feito assim:
https://seusite.com.br/main.php?pg=contas
Nesse cenário, o navegador entende que tudo acontece dentro do arquivo main.php. Quando o usuário clicava em um link com href="#", o navegador apenas movia o scroll para o topo da mesma página.
Após implementar URLs amigáveis:
https://seusite.com.br/contas/
Agora o navegador interpreta contas/ como um diretório virtual. Ao clicar em um link com #, alguns navegadores podem tentar resolver a âncora dentro desse novo contexto de rota, disparando um recarregamento parcial ou uma nova interpretação da URL.
Esse comportamento pode interromper o JavaScript responsável por abrir o modal.
2. Comportamento Padrão da Âncora
O href="#" possui um comportamento nativo:
- Adicionar
#na URL - Mover o scroll para o topo da página
Se o JavaScript do modal for executado ao mesmo tempo em que o navegador tenta processar essa “navegação”, pode ocorrer um conflito.
Na prática:
- O JavaScript dispara
- O navegador inicia a navegação da âncora
- O estado da página muda
- O modal não consegue abrir corretamente
3. Interação com o .htaccess
Quando usamos regras de RewriteRule, normalmente tudo é redirecionado para um único arquivo, como:
RewriteEngine On
RewriteRule ^([a-zA-Z0-9_-]+)/?$ main.php?pg=$1 [L,QSA]
Sem o preventDefault(), o navegador continua tentando seguir o link normalmente.
Com o preventDefault(), informamos:
“Não execute o comportamento padrão deste link. O JavaScript vai cuidar disso.”
A Solução
A forma correta de tratar links usados apenas para ações JavaScript é bloquear o comportamento padrão do navegador.
Exemplo:
$('.btn-modal').on('click', function(e) {
e.preventDefault();
$('#meuModal').modal('show');
});
Usando Delegação de Eventos
Quando a página possui conteúdo carregado dinamicamente via AJAX ou renderização parcial, a melhor abordagem é usar delegação de eventos:
$(document).on('click', '.btn-modal', function(e) {
e.preventDefault();
$('#meuModal').modal('show');
});
Essa abordagem garante que o evento continue funcionando mesmo após atualizações dinâmicas da interface.
Por que Funcionava Antes?
Antes das URLs amigáveis, a URL era considerada “plana”. O navegador resolvia o # instantaneamente sem interpretar mudanças de rota ou diretórios virtuais.
O JavaScript conseguia executar antes de qualquer efeito colateral causado pelo link.
Com caminhos amigáveis, a navegação passou a envolver regras de reescrita e contexto virtual, tornando o uso do preventDefault() praticamente obrigatório.
Conclusão
Ao utilizar URLs amigáveis com .htaccess, é uma boa prática usar e.preventDefault() em qualquer link responsável apenas por ações JavaScript.
Isso evita:
- Recarregamentos inesperados
- Conflitos com modais Bootstrap
- Problemas com rotas amigáveis
- Execuções interrompidas de scripts
Além disso, utilizar delegação de eventos com $(document).on() torna a aplicação mais robusta para conteúdos carregados dinamicamente.