Arquivo Discussoes de Programacao e Tecnologia Criei uma função para acionar um evento quando clico em um link, mas na tela em questão, tem dois links com a mesma classe, teria como eu adicionar tipo .class[id=^link] os valores de ID que comecem com o link?
$('body').on('click','.ps-ico-close[id=^"link"]',function() {
console.log("clicou para fechar modal e chamar pesquisa");
Se é pra clicar em um, nao pode usar o id diretamente?
Não posso, o id é dinâmico… ele começa com “link_…” e não consigo apontar para ele, e o outro id, é de uma outra tela que só aponto (empresa grande).
Então teria que fazer algum jeito assim, pq está chamando a função duas vezes, quando fecha a modal que adicionei o evento
Usa o seletor first ou last ja que tem dois.
$('body').on('click','.ps-ico-close:first',function() {
console.log("clicou para fechar modal e chamar pesquisa");
ou até mesmo o eq para pegar o i-esimo elemento
$('body').on('click','.ps-ico-close:eq(0)',function() {
console.log("clicou para fechar modal e chamar pesquisa");
Faz da forma abaixo que não tem erro, e facilita ao olhar o html ter noção do que o elemento faz.
HTML:
<a href="javascript:void(0);" onclick="suaFuncao(this);">teste</a>
JS:
function suaFuncao(linkClicado) {
}
Valeu, é que aqui é tudo componentizado, então por isso não consigo adicionar diretamente a função lá e tive que colocar um “listener” no click.
Mas obrigado pela força
Não deu certo não, só funcionou uma vez, quando o link é gerado mais de uma vez, não funciona
Se são apenas dois links, e o id é dinâmico, por que você não cria outra classe para cada um deles ?
Estranho… Posta o seu código para a gente dar uma olhada.
De qualquer forma, inspeciona a página e verifica quantos elementos com essa determinada classe existe.
É componentezado, não muda o nome das classes, ele gera uma lista.
$(‘body’).on(‘click’,’.ps-ico-close’,function() {
console.log(“clicou”);
var teste = ‘afafs sdsa - fasf - teste’;
if(teste.indexOf(‘teste’) !== -1){
console.log(“aqui”);
abrePesquisa(‘A’, ‘BCDE’);
} else {
console.log(“aqui não”);
}
});
Eu me referia ao código que gera os componentes, pois era para funcionar…
<a class=" ps-g-modal" data-gtm-clicktype="button" data-gtm-name="[telefone removido]" data-gtm-type="click" href="javascript:;" id="link_1069560776" name="link_1069560776" data-modal-title="Histórico do Documento" data-modal="#link_1069560776_modal" data-modalonshow="activateIframeModal($('#link_1069560776_modal'))" data-modalbackdropstatic="false" data-modalkeyboarddisable="true">[telefone removido]</a>
E depois aparece esse ícone para eu fechar (onde está minha função:
<span class="ps-ico ps-ico-sm ps-sm-ico-lg ps-ico-close"></span>
E esse span, aparece novamente depois para mostrar uma pesquisa de satisfação, ou seja, vira um loop, pois tem as mesmas classes ps-ico…
Entendo, componentizado engessa muito.
Se é tudo adicionado automaticamente, você vai ter que encontrar alguma forma de diferenciá-los, para que quando ocorra o click, você consiga capturar e comparar algum valor para então executar alguma ação.
Talvez isso ajude
E[foo*=“bar”] (an E element whose “foo” attribute value contains the substring “bar”)
Mais detalhes aqui:
https://www.w3.org/TR/selectors-3/#content-selectors
Veja se alguma resposta aqui irá te ajudar:
Abraços.
Eu tentei algo parecido mas não deu muito certo.
Eu coloquei assim:
$(‘body’).on(‘click’,’.ps-ico-close:not(:has(> #ModalDialogPesquisa))’,function() {
Pegar todas as classes, menos a que tenha esse ID (consegui pegar o ID da função abrePesquisa).
mas as vezes funciona e as vezes chama novamente (mesmo erro citado).
Você não tem acesso ao fonte que gera esse componente? Se tiver, poderia parametrizar o que for necessário.
Não tenho acesso
Sinistro trabalhar dessa forma.
Ficaria melhor pro pessoal reproduzir e resolver se você anexar o html inteiro.
Sem voce postar o código inteiro esta seria a solucao mais próxima:
$(".ps-ico-close:not(#ModalDialogPesquisa .ps-ico-close)").click(function() {
});
O código é praticamente esse mesmo que passei, não tem mais coisas…
Qual a maneira correta? essa que passou sem o has ou com?
$(‘body’).on(‘click’,’.ps-ico-close:not(:has(> #ModalDialogPesquisa))’,function() {
O certo seria ter o controle do HTML pra nao precisar de nenhuma gambiarra.
Considerando o caos que está essa solução onde voce não tem controle do HTML, o que funcionar vai ser o certo. O exemplo que te passei funciona, o evento click não foi setado para o elemento dentro da div que seria o modal.