Seletor Jquery

Front-end
#1

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");
#2

Se é pra clicar em um, nao pode usar o id diretamente?

#3

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

#4

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");
#5

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) {
  
}
1 curtida
#6

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

#7

Não deu certo não, só funcionou uma vez, quando o link é gerado mais de uma vez, não funciona

#8

Se são apenas dois links, e o id é dinâmico, por que você não cria outra classe para cada um deles ?

#9

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.

#10

É componentezado, não muda o nome das classes, ele gera uma lista.

#11

$(‘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”);
}
});

#12

Eu me referia ao código que gera os componentes, pois era para funcionar…

#13

<a class=" ps-g-modal" data-gtm-clicktype="button" data-gtm-name="1069560776" 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">1069560776</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>

#14

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…

#15

Entendo, componentizado engessa muito.

#16

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:

https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text

Abraços.

#17

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).

#18

Você não tem acesso ao fonte que gera esse componente? Se tiver, poderia parametrizar o que for necessário.

#19

Não tenho acesso

#20

Sinistro trabalhar dessa forma.

Ficaria melhor pro pessoal reproduzir e resolver se você anexar o html inteiro.