Como acionar um clique em um link usando jQuery

238

Eu tenho um link:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

e estou tentando acioná-lo usando:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Mas isso não funciona.

Eu também tentei: $('#titleee a').trigger('click');

Editar :

Na verdade, eu preciso acionar o que for chamado aqui <a href="#inline" rel="prettyPhoto">

jquery triggers click Patrioticcow
fonte
7
location.href($('#titleee').find('a').attr("href"));?
27411 Sylvain
3
ou mesmo $ ('ul.gallery'). find ('li> a'). trigger ('click');
CarneyCode
114
Rapazes. A resposta real é tão simples. $('#titleee a')[0].click();. Em outras palavras, use o método de clique no DOM, não o método jQuery. Voto por favor Graham Hotchkiss !
Roman Starkov
5
@romkyns não, não está certo, pois abre um pop-up em vez de uma nova guia. mas ao clicar em um espaço fictício dentro deste 'a' tag serve o propósito
Shishir Arora
1
Se você estiver tentando disparar um evento na âncora, o código que você possui funcionará. $('ul#titleee li a[href="#inline"]').click();
Anand Pal

Respostas:

307

Se você estiver tentando disparar um evento na âncora, o código que você possui funcionará. Recriei seu exemplo no jsfiddle com um eventHandler adicionado, para que você possa ver que funciona:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Você está tentando fazer com que o usuário navegue para um determinado ponto da página da Web clicando na âncora ou tentando desencadear eventos vinculados a ela? Talvez você não tenha vinculado o evento de clique com êxito ao evento?

Também isto:

$('#titleee').find('a').trigger('click');

é o equivalente a isso:

$('#titleee a').trigger('click');

Não há necessidade de ligar para encontrar. :)

Kit Sunde
fonte
16
O @Kit .find () é um seletor mais rápido do que o que você está propondo; faça um benchmark se você não concordar, mas sua proposta o atrasa. positivamente :-)
Ady Ngom 27/04
14
@mashappslabs - Tudo bem. Fico feliz por você, se sentir a necessidade de otimizações prematuras e micro, não importa quão verdadeira seja. :)
Kit Sunde
5
@Kit ... então, quando você está fazendo uma declaração como "não há necessidade de chamar a localização", ela não se enquadra no domínio da otimização prematura? Acho que sim, mas é mais lento do que o proposto inicialmente. Não estou respondendo por uma questão de argumentação, mas por um esforço conjunto para melhorar o que todos gostamos de fazer. Espero que este sai certo :-)
Ady Ngom
5
@mashappslabs - Tendo visto jsperf.com pela primeira vez, pensei em voltar e dizer que você está certo, seu método é mais rápido no caso geral. Somente o Opera é mais lento. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde
9
Estranhamente, o acima não funciona para mim, mas a resposta @GrahamHotchkiss funciona.
Oliver
210

Desculpe, mas o manipulador de eventos realmente não é necessário. O que você precisa é de outro elemento na tag para clicar.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

É tudo sobre o que você está clicando e não é a tag, mas a coisa dentro dela. Infelizmente, o texto puro não parece ser reconhecido pelo JQuery, mas é pelo javascript vanilla:

document.getElementById('test1').click(); // Works!

Ou acessando o objeto jQuery como uma matriz

$('#test1')[0].click(); // Works too!!!
Graham Hotchkiss
fonte
9
$ ('selector') [0] .click () na verdade tratará de pelo menos um caso que o acionador do manipulador de eventos não fará: ter o navegador reconhecê-lo como um clique real para acionar um link do manipulador de protocolo. O acionador de chamada no evento click não fará com que o aplicativo associado seja iniciado. Obrigado por incluí-lo em sua resposta!
Greg Pettit
3
Sim, .click()é precisamente o que eu precisava!
Notacouch 17/10
3
$ ('# test2 span'). trigger ('clique'); ajudou, pois pode abrir um URL em uma nova guia, mas $ ('# test1') [0] .click (); estava abrindo um pop-up instea.
Shishir Arora
Quando tento manipular, clique no elemento em segundo plano: $ ('# titleee a'). Trigger ('click'); -> Não funciona! $ ('# titleee a') [0] .click (); -> Funciona!
18augst
1
$ ('# test1') [0] .clique (); é um salvador. Muito obrigado
Amit Bisht
18

Como esta pergunta está classificada como nº 1 no Google por "acionar um clique em um <a>elemento" e nenhuma resposta realmente menciona como você faz isso, é assim que você faz:

$('#titleee a')[0].click();

Explicação: você aciona um clickno elemento html subjacente, não no objeto jQuery .

De nada googlers :)

Alex
fonte
2
"você aciona um clique no elemento html subjacente, não no objeto jQuery." - isso clicou em mim, obrigado!
Frish
5

Com o código que você forneceu, você não pode esperar que nada aconteça. Eu segundo @mashappslabs: primeiro adicione um manipulador de eventos:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

em seguida, acione seu evento:

$("selector").click(); //or
$("selector").trigger("click");

e você deverá ver a mensagem no seu console.

Julz
fonte
5
Isso não funciona para mim: se o seletor é "a" (tag HTML para links, apenas para esclarecer), a função anônima é chamada quando eu ligo trigger, mas a ação da tag não acontece. É como se o evento não fosse propagado para o elemento DOM associado. A resposta de @GrahamHotchkiss é a única que funciona de maneira confiável para mim.
Oliver
5

Se você estiver tentando disparar um evento na âncora, o código que você possui funcionará.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

OU

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

OU

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});
Anand Pal
fonte
3

Bem, você deve primeiro configurar o evento click e acioná-lo e ver o que acontece:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');
Ady Ngom
fonte
3

Esta é a demonstração de como acionar o evento

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>
Harshad Hirapara
fonte
3

Para links, isso deve funcionar:

eval($(selector).attr('href'));
Amin
fonte
2

Isso não responde exatamente à sua pergunta, mas você obtém o mesmo resultado com menos dor de cabeça.

Sempre tenho meus eventos de clique que chamam métodos que contêm toda a lógica que gostaria de executar. Para que eu possa chamar o método diretamente se quiser executar a ação sem um clique real.

Matthew Vines
fonte
2

Você deve chamar o .click()método nativo do elemento ou usar o métodocreateEvent API.

Para mais informações, visite: https://learn.jquery.com/events/triggering-event-handlers/

George Filippakis
fonte
6
Bem-vindo ao Stack Overflow! Embora isso possa ser uma dica valiosa para resolver o problema, uma boa resposta também demonstra a solução. Por favor edite a fornecer exemplo de código para mostrar o que você quer dizer. Como alternativa, considere escrever isso como um comentário.
Toby Speight