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

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.

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/

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

setTimeout(function(){ $('#btn').click()}, 100);

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

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!
        }
    });
}

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

})

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

Experimente o que funciona para mim:

$('#bar').mousedown();

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.

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

Apenas use isto:

$(function() {
 $('#watchButton').click();
});

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.