Estou montando um pequeno sistema que mostra lojas a partir de um modal com conteúdo PHP. Quando o elemento é selecionado na página HTML principal, ele exibe um modal com uma lista de lojas que, caso tenham seu nome clicado, aparece uma indicação no Google Maps ao seu lado.
O problema é: o código e a função funcionam perfeitamente para o primeiro elemento da página principal que é clicado, mas para o segundo e os demais, o script nem roda. Ou seja, quando se clica no elemento para exibir os outros modais, as lojas aparecem, mas os eventos JavaScript não acontecem, somente acontecem no primeiro elemento.
Esse é o código PHP que está dentro do modal em que são exibidas as lojas:
<div class="lojas">
<div class="informacoes_lojas">
<?php foreach($lojas as $loja): ?>
<div class="loja_individual">
<h3 id="loja<?php echo $loja['codigo']?>"><?php echo $loja['nome']?></h3>
<p><?php echo $loja['endereco']?></p>
<p><?php echo $loja['bairro'] . " | " . $loja['cidade'] . " - " . $loja['estado']?></p>
<p><?php echo "CEP: " . $loja['cep']?></p>
<p><?php echo "Tel.: " . $loja['telefone']?></p>
</div>
<?php endforeach; ?>
</div>
</div>
Essa é a função javascript que captura o click no h3
de uma delas e exibe um iframe
do Google Maps:
const encontraLoja = e => {
loja = e.target.id;
codigoLoja = loja.replace(/[a-z]+/,"");
switch (codigoLoja){
case "1":
$mapaGoogle.src = "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3655.4571578146847!2d-46.7012032354786!3d-23.62379373465189!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sAv.+Roque+Petroni+Jr%2C+1089+-+Lojas+63C+e+63D+-+Piso+T%C3%A9rreo!5e0!3m2!1spt-BR!2sbr!4v1556975644631!5m2!1spt-BR!2sbr";
break;
(...)->restante do switch
}
}
const $lojas = document.querySelector(".lojas");
$lojas.addEventListener("click", encontraLoja);
Notem que durante a confecção das lojas todas recebem um ID, que vai depender do código das mesmas. É a partir desse ID que o JavaScript (na função) consegue determinar o mapa e afins.
.lojas
e só há um elemento desse na DOM aparentemente. Seu seletor não deveria ser algo como.lojas h3
se a intenção é deixar o evento nestes elementos?div.lojas
e no seu JavaScript está selecionando justamente ele, pois você usouquerySelector('.lojas')
. Por favor, faça um Exemplo Mínimo, Completo e Verificável reproduzindo o problema.