Como simular um clique de âncora via jquery?

144

Tenho um problema ao fingir um clique de âncora via jQuery: Por que minha caixa grossa aparece na primeira vez que clico no botão de entrada, mas não na segunda ou terceira vez?

Aqui está o meu código:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Ele sempre funciona quando clico diretamente no link, mas não se eu tentar ativar a caixa espessa por meio do botão de entrada. Isso está no FF. Para o Chrome, parece funcionar sempre. Alguma dica?

prinzdezibel
fonte
1
Você está deixando de fora o código aqui. Não há código associado ao evento click para a âncora que você nos mostrou. O que esse código faz? Existe algum outro código envolvido?
Matt
1
@ Matt Se você usar o método click sem parâmetros, ele não será mais interpretado como uma associação de eventos, ele realmente CLICARÁ (como se você fosse clicar com o mouse) no elemento ao qual está acorrentado. Nesse caso, quando o elemento de entrada é clicado, o elemento com o ID 'thickboxId' também deve ser clicado.
KyleFarris
3
@KyleFarris: o evento click () não funciona no Chrome ou Safari, a menos que o elemento a ser clicado tenha um evento onclick associado a ele, e ainda assim acionará essa parte e não navegará até o valor href. No caso acima, ele deseja que ele navegue até a propriedade href da tag A, como se o usuário tivesse clicado no link.
Sensitive

Respostas:

123

Tente evitar incluir suas chamadas jQuery dessa maneira. Coloque uma tag de script na parte superior da página para vincular ao clickevento:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Editar:

Se você está tentando simular um usuário clicando fisicamente no link, não acredito que isso seja possível. Uma solução alternativa seria atualizar o clickevento do botão para alterar o window.locationJavascript:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

Edição 2:

Agora que percebi que o Thickbox é um widget personalizado da interface do usuário do jQuery, encontrei as instruções aqui :

Instruções:

  • Crie um elemento de link ( <a href>)

  • Atribua ao link um atributo de classe com um valor de thickbox ( class="thickbox")

  • No hrefatributo do link, adicione a seguinte âncora:#TB_inline

  • No hrefatributo após a #TB_inlineinclusão da seguinte cadeia de consulta na âncora:

    ? height = 300 & width = 300 & inlineId = myOnPageContent

  • Altere os valores de altura, largura e inlineId na consulta adequadamente (inlineID é o valor de ID do elemento que contém o conteúdo que você deseja mostrar em um ThickBox.

  • Opcionalmente, você pode adicionar modal = true à string de consulta (por exemplo #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) para que o fechamento de um ThickBox exija a chamada da tb_remove()função de dentro do ThickBox. Veja o exemplo de conteúdo modal oculto, no qual você deve clicar em Sim ou Não para fechar o ThickBox.

John Rasch
fonte
window.location no manipulador de cliques não funciona, pois o thickbox não funciona conforme o esperado.
Prinzdezibel
No segundo exemplo, pode ser aconselhável usar em .prop()vez de attr()obter o URL resolvido.
precisa saber é o seguinte
Estou surpreso que esta seja a resposta aceita. O acionador de clique funcionará apenas no elemento DOM nativo, não no elemento wrapper jQuery. Isso é discutido por @Stevanicus e comentários, e em várias outras postagens de SO. A resposta deve ser alterada para a de Stevanicus.
Oliver
@ Schollii - fique à vontade para editá-lo com a precisão desejada.
9788 John Rasch
3
Eu quis dizer que a resposta aceite deve ser a de @stevanicus
Oliver
194

O que funcionou para mim foi:

$('a.mylink')[0].click()
Stevanicus
fonte
1
. doa que a próxima parte seja um nome de classe. # seria para um ID.
Stevanicus 3/12/12
3
Se for necessário para uma entrada, use em focusvez de click:)
Andrius Naruševičius
Isso funciona para mim também, mas por que isso funciona? Por que $ ('a.mylink') [0] .click () funciona mas $ ('a.mylink'). Eq (0) .click () não funciona?
ChrisC
4
[0]indica o primeiro elemento da matriz - um seletor retorna 0 ou mais elementos quando é executado. É lamentável que .click()isso não pareça funcionar diretamente aqui, pois aparentemente outras invocações são aplicadas a coleções de elementos de seletores de forma consistente em toda a estrutura.
cfeduke
8
Usando [0]ou .get(0)são os mesmos. Eles usam a versão DOM do elemento, em vez da versão jQuery. A .click()função neste caso não é o evento de clique do jQuery, mas o nativo.
Radley Sustaire
19

Eu descobri recentemente como acionar um evento de clique do mouse via jQuery.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>
Jure
fonte
1
Eu não acho que isso funcione no IE, pelo menos não 7 ou 8, porque não parece haver um método createEvent no documento.
Jeremy
Como a águia diz, isso funciona nos navegadores de kit da web. Mas note que você não está realmente usando jQuery aqui (diferente do $ seleção)
tokland
1
falta esta metade da mágica: stackoverflow.com/questions/1421584/… #
daniloquio 2/12/12
9

Essa abordagem funciona no Firefox, Chrome e IE. espero que ajude alguém:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}
damian
fonte
Muito útil e a melhor opção devido à compatibilidade cruzada na minha opinião. Não gosto de agrupar tudo em blocos try / catch, mas entendo que isso é feito para realizar tentativas em cascata para cada navegador.
H0r53 11/11/19
8

Embora essa seja uma pergunta muito antiga, encontrei algo mais fácil de lidar com essa tarefa. É o plugin jquery desenvolvido pela equipe da interface do usuário jquery chamada simulate. você pode incluí-lo após o jquery e, em seguida, pode fazer algo como

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

funciona bem no chrome, firefox, opera e IE10. você pode baixá-lo em https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Ruwanka Madhushan
fonte
Um recurso importante simulate()é que ele envia os eventos do jQuery , além de acionar a ação nativa do navegador. Esta é agora a resposta correta +1
Gone Coding
Funciona como um encanto e me permite abrir a página em uma nova guia quando o usuário clica em um botão na minha grade de kendo.
John Sully
6

O título da pergunta diz "Como posso simular um clique de âncora no jQuery?". Bem, você pode usar os métodos "trigger" ou "triggerHandler", assim:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Não testado, esse script real, mas eu usei triggeret al antes, e eles funcionaram bem.

ATUALIZAÇÃO
triggerHandler não faz o que o OP quer. Eu acho que 1421968 fornece a melhor resposta para essa pergunta.

elo80ka
fonte
5

Sugiro consultar a API Selenium para ver como eles acionam um clique em um elemento de maneira compatível com o navegador:

Procure a BrowserBot.prototype.triggerMouseEventfunção.

Sébastien RoccaSerra
fonte
4

Eu acredito que você pode usar:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

Isso acionará facilmente a função de clique, sem realmente clicar nela.

Deepak
fonte
2

Você precisa fingir um clique de âncora? No site do thickbox:

O ThickBox pode ser chamado a partir de um elemento de link, elemento de entrada (normalmente um botão) e o elemento de área (mapas de imagem).

Se isso for aceitável, deve ser tão fácil quanto colocar a classe thickbox na própria entrada:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

Caso contrário, eu recomendaria usar o Firebug e colocar um ponto de interrupção no método onclick do elemento anchor para ver se ele foi acionado apenas no primeiro clique.

Editar:

Ok, eu tive que tentar por mim mesmo e por mim exatamente o seu código funcionou no Chrome e no Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

A janela aparece, não importa se eu clico na entrada ou no elemento âncora. Se o código acima funcionar para você, sugiro que seu erro esteja em outro lugar e que você tente isolar o problema.

Outra possibilidade é que estamos usando versões diferentes do jquery / thickbox. Estou usando o que obtive da página do thickbox - jquery 1.3.2 e thickbox 3.1.

waxwing
fonte
Sim, preciso falsificá-lo e sim o manipulador de cliques funciona. Mas, na verdade, eu não defini o evento onclick e funcionou, mas apenas na primeira vez. Mas também com o onclick manipulado no thickboxId, ele não funcionará.
Prinzdezibel
O que eu quis dizer foi verificar se o onclick no elemento âncora é acionado toda vez que você clica no elemento de entrada. Ah, e veja minha edição acima.
waxwing
2

Você pode criar um formulário via jQuery ou no código da página HTML com uma ação que imita o seu link href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();
Rus Miller
fonte
Esse método faz com que a página inteira seja recarregada em vez de simplesmente pular para uma âncora. Além disso, ele também adiciona o "?" para o URL, para que a página se torne example.com?#test em vez de example.com # test . Testado no Chrome e Safari.
Sensitive
No FF, isso funcionará bem. Nos navegadores Webkit, você obterá os URLs como descrito por Senseful. Mas isso não é problema, não é?
21711 sdepold
2

Para simular um clique em uma âncora durante o pouso em uma página, usei o jQuery para animar a propriedade scrollTop em $(document).ready.Não há necessidade de um gatilho complexo e que funcione no IE 6 e em qualquer outro navegador.

Julien
fonte
2

Se você não precisar usar o JQuery, como eu não. Eu tive problemas com a função de navegador cruzado de .click(). Então eu uso:

eval(document.getElementById('someid').href)
Craig
fonte
Rápido e sujo, mas funcionou para mim. No jQuery, isso é eval ($ ("# someid"). Attr ("href"));
Mhenry1384 4/04
2

Em Javascript, você pode fazer assim

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

e você pode usá-lo como

submitRequest("target-element-id");
Yashpal Singla
fonte
1

Usando o script de Jure, eu fiz isso para "clicar" facilmente em quantos elementos você quiser.
Usei o Google Reader em mais de 1600 itens e funcionou perfeitamente (no Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
fregante
fonte
Eu não acho que isso funcione no IE, pelo menos não 7 ou 8, porque não parece haver um método createEvent no documento.
Jeremy
Acredito que document.createEventObject () deve ser usado no IE, mas não tentei.
fregante 12/03/10
@ bfred.it: Parece que createEventObjectno IE é mais para criar um objeto de evento para passar para manipuladores, em vez de despachar um evento sintético. O IE fireEventpode estar mais próximo dispatchEvent, mas apenas acionará os ouvintes - não as ações padrão do navegador. No entanto, no IE, você pode simplesmente chamar o clickmétodo
theazureshadow
1

JQuery('#left').triggerHandler('click');funciona bem no Firefox e IE7. Não testei em outros navegadores.

Se desejar acionar cliques automáticos do usuário, faça o seguinte:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
Singh
fonte
1

Isso não funciona no navegador nativo do Android para clicar em "elemento de entrada (arquivo) oculto":

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

Mas isso funciona:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();
cavalo
fonte
0

Ao tentar simular um 'clique' nos testes de unidade com o jQuery UI spinner, não consegui obter nenhuma das respostas anteriores para funcionar. Em particular, eu estava tentando simular o 'giro' de selecionar a seta para baixo. Eu olhei para os testes de unidade giratória jQuery UI e eles usam o seguinte método, que funcionou para mim:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
wbdarby
fonte