Como obter o JQuery.trigger ('click'); para iniciar um clique do mouse

145

Estou tendo dificuldade para entender como simular um clique do mouse usando o JQuery. Alguém pode me informar sobre o que estou fazendo de errado.

HTML:

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery:

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

Demo: FIDDLE

quando clico no botão #foo, quero simular um clique em #bar, no entanto, quando tento isso, nada acontece. Eu também tentei, jQuery(document).ready(function(){...})mas sem sucesso.

lickmycode
fonte
2
jQuery triggersó funciona se qualquer evento 'jQuery click` for adicionado. Caso contrário, você não poderá fazer nada dessa maneira;
Reza Mamun
3
Esta é uma medida de segurança incorporada no navegador. Veja a resposta do @ Blazemonger: stackoverflow.com/questions/7999806/…
sanchez
1
@ san.chez Interessante, obrigado pela informação, não sabia dessa medida de segurança antes!
Lickmycode

Respostas:

277

Você precisa usar jQuery('#bar')[0].click(); para simular um clique do mouse no elemento DOM real (não no objeto jQuery), em vez de usar o.trigger() método jQuery.

Nota: O DOM Nível 2 .click()não funciona em alguns elementos do Safari . Você precisará usar uma solução alternativa.

http://api.jquery.com/click/

Alex W
fonte
18
você salvou meu dia $ ('# asd') [0] .click ();
Waza123 31/05
Use isso para clicar na próxima guia nos campos do jQuery ACF: $ ('. Next'). Click (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .click ();});
10136 Tisch
1
obrigado. Funciona na área de trabalho. Mas no celular (android chrome) isso não acontece. alguma sugestão?
kk-dev11
Por alguma razão, isso destrói o hash no URL atual.
Luis
1
se um dos hrefs na tag <a for '#', isso seria suficiente. <a normalmente redireciona para um URL diferente. Você deve pará-lo com ev.preventDefault () e ev.stopPropagation () antes que o manipulador de cliques retorne. OU, use alguma outra tag além de <a; você pode anexar manipuladores de clique a qualquer coisa visível.
OsamaBinLogin 27/03
43

Você só precisa colocar um pequeno evento de tempo limite antes de fazer o .click() seguinte:

setTimeout(function(){ $('#btn').click()}, 100);
Ashish Khurana
fonte
Funciona perfeitamente se você estiver tentando simular um clique quando a página for carregada.
Gabriel Dzul 12/04/19
33

Esse é o comportamento do JQuery. Não sei por que funciona dessa maneira, apenas aciona a função onClick no link.

Experimentar:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});
Filip Górny
fonte
Obrigado pela explicação. Comportamento muito irritante do jQuery, mas seu código funciona.
Lickmycode
Não é nada irritante. trigger()destina-se a executar a parte JavaScript do evento click . É muito semelhante à criação de um que function var() {}é reutilizado várias vezes.
21

Veja minha demonstração: http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}
Reza Mamun
fonte
Eu iria embrulhar o this.click();em umelse if(this.click)
Alex W
15

Pode ser útil:

O código que chama o gatilho deve ir depois que o evento é chamado.

Por exemplo, eu tenho algum código que quero que seja executado quando o valor #expense_tickets for alterado e também quando a página for recarregada

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})
Albert Català
fonte
4
Ahhh, esse foi o meu problema também! Estava confuso sobre o porquê do trigger()não estar funcionando. Acontece que eu tinha o código de gatilho definido ACIMA da função que estava chamando - então o gancho não estava realmente no lugar. Doh!
Andrew Newby
5

O jQuery's .trigger('click');fará com que um evento seja acionado apenas nesse evento, e também não acionará a ação padrão do navegador.

Você pode simular a mesma funcionalidade com o seguinte JavaScript:

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});
Alexander O'Mara
fonte
2

Experimente o que funciona para mim:

$('#bar').mousedown();
Henry
fonte
0

Tentei as duas principais respostas, não funcionou até remover o "display: none" dos elementos de entrada do arquivo. Depois voltei ao .trigger () que também funcionava no safari for windows.

Então, conclusão: Não use display: none; para ocultar sua entrada de arquivo , você pode usar opacity: 0.

Himanshu Saini
fonte
0

Tecnicamente, não é uma resposta para isso, mas um bom uso da resposta aceita ( https://stackoverflow.com/a/20928975/82028 ) para criar botões next e prev para as guias nos campos do jQuery ACF:

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
Tisch
fonte
0

Apenas use isto:

$(function() {
 $('#watchButton').click();
});
Sanath LS
fonte
-3

Você não pode simular um evento de clique com javascript. A .trigger()função jQuery aciona apenas um evento chamado "clique" no elemento, que você pode capturar com o .on()método jQuery.

yachaka
fonte
9
"Você não pode simular um evento de clique com javascript" - Sim, você pode .
Nnnnnn
Errado ... você pode simular um evento de clique com javascript / jquery e pode capturar um evento de clique de gatilho com .click sem ativado.
Aerious