Como posso simular uma âncora clique via jquery?

Question

Eu tenho um problema com fingindo uma âncora clique via jQuery: Por que o meu thickbox aparecer na primeira vez que eu clicar no botão de entrada, mas não a 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>

É sempre funciona quando eu clicar diretamente no link, mas não se eu tentar ativar o thickbox através do botão de entrada. Isto é, em FF. Para Chrome parece funcionar de cada vez. Alguma dica?

Answer 1

Tente evitar inlining suas chamadas jQuery assim. Coloque uma marca de script no topo da página para vincular ao evento click:

<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 clicar fisicamente o link, em seguida, eu não acredito que é possível. Uma solução alternativa seria para atualizar evento click do botão para mudar o window.location em Javascript:

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

Editar 2:

Agora que eu perceber que Thickbox é um costume jQuery UI widget, eu achei as instruções aqui :

Instruções:

• Criar um elemento de ligação (<a href>)
• Dê o link um atributo de classe com um valor de thickbox (class="thickbox")
• No atributo href do link de adicionar o seguinte âncora: #TB_inline

• No atributo href após a #TB_inline adicione o seguinte string de consulta para a âncora:

  ? Height = 300 & width = 300 & inlineId = myOnPageContent

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

• Opcionalmente, você pode adicionar modal = true para a string de consulta (por exemplo #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) para que fechar uma ThickBox exigirá chamar a função tb_remove() de dentro do ThickBox. Veja o exemplo de conteúdo modal escondidos, onde você deve clicar sim ou não para fechar a ThickBox.

Answer 2

O que funcionou para mim foi:

$('a.mylink')[0].click()

Answer 3

Eu encontrei recentemente como gatilho clique do mouse evento 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>

Answer 4

esta 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) {}

Answer 5

Embora este é questão muito antiga eu encontrei algo mais fácil de lidar com essa tarefa. É plugin jQuery desenvolvido pela equipe do jQuery UI chamado de simulação. você pode incluí-lo depois de jquery e, em seguida, você pode fazer algo como

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

funciona bem no Chrome, Firefox, Opera e IE10.you pode baixá-lo a partir de https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

Answer 6

O título da pergunta diz: "Como posso simular uma âncora clique em jQuery?". Bem, você pode usar o "gatilho" ou métodos "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, este script real, mas eu usei trigger et al antes, e eles trabalharam A'ight.

Atualizar
triggerHandler na verdade não faz o que o OP quer. Acho 1.421.968 fornece a melhor resposta a esta pergunta.

Answer 7

Eu sugiro a olhar para a API Selenium para ver como eles desencadear um clique em um elemento de uma forma compatível com o navegador:

• selênio-browserbot.js

Olhe para a função BrowserBot.prototype.triggerMouseEvent.

Answer 8

Eu acredito que você pode usar:

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

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

Isto irá facilmente acionar a função de clique, sem realmente clicar sobre ele.

Answer 9

Do que você precisa para falsificar uma âncora clique? A partir do site thickbox:

ThickBox pode ser invocado a partir de um elemento de ligação, elemento de entrada (normalmente um botão), e o elemento de área (mapas de imagem).

Se isso é aceitável que deveria ser tão fácil como colocar a classe thickbox na própria entrada:

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

Se não, eu recomendo usar o Firebug e colocando um ponto de interrupção no método onclick do elemento âncora para ver se ele só é acionado no primeiro clique.

Editar:

Ok, eu tinha que tentar para mim e para mim muito bonito exatamente o seu código trabalhou em ambos Chrome e 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 pop ups não importa se eu clicar a entrada ou o elemento âncora. Se o código acima funciona para você, sugiro suas mentiras erro em outro lugar e que você tente isolar o problema.

Outra possivelmente é que estamos usando diferentes versões do jquery / thickbox. Eu estou usando o que eu tenho a partir da página thickbox -. JQuery 1.3.2 e thickbox 3.1

Answer 10

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();

Answer 11

Para simular um clique em uma âncora enquanto o desembarque em uma página, eu só usei jQuery para animar a propriedade scrollTop em $(document).ready. Não há necessidade de um gatilho complexo, e que funciona no IE 6 e todos os outros navegadores.

Answer 12

Se você não precisa usar JQuery, como eu não. Eu tive problemas com o func cross browser de .click(). Então, eu uso:

eval(document.getElementById('someid').href)

Answer 13

No Javascript você pode fazer como este

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

Answer 14

Usando o roteiro de Jure Eu fiz este, facilmente "clique", como muitos elementos que você deseja.
Eu apenas usei o Google Reader em 1600 + itens e ele funcionou perfeitamente (no Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

Answer 15

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

Se deseja acionar usuário automática cliques faça o seguinte:

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

Answer 16

Isto não funciona no navegador nativo android clicar em "input escondido (arquivo) elemento":

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

mas isso funciona:

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

Answer 17

Na tentativa de simular um 'click' em testes de unidade com o spinner jQuery UI não consegui nenhuma das respostas anteriores ao trabalho. Em particular, eu estava tentando simular o 'spin' de selecionar a seta para baixo. Olhei para os testes de unidade girador jQuery UI e eles use o seguinte método, que trabalhou para mim:

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