Cómo obtener JQuery.trigger ('clic'); para iniciar un clic del mouse

Me está costando entender cómo simular un clic del mouse usando JQuery. ¿Alguien puede informarme sobre lo que estoy haciendo mal?

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

Demostración: FIDDLE

cuando hago clic en el botón #foo quiero simular un clic en #bar sin embargo, cuando intento esto, no sucede nada. También lo intenté jQuery(document).ready(function(){...})pero sin éxito.

Debe usar jQuery('#bar')[0].click(); para simular un clic del mouse sobre el elemento DOM real (no el objeto jQuery), en lugar de usar el .trigger()método jQuery.

Nota: DOM Nivel 2 .click()no funciona en algunos elementos en Safari . Deberá usar una solución alternativa.

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

Solo necesita poner un pequeño evento de tiempo de espera antes de hacer .click() esto:

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

Este es el comportamiento de JQuery. No estoy seguro de por qué funciona de esta manera, solo activa la función onClick en el enlace.

Tratar:

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

Ver mi demo: 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!
        }
    });
}

Puede ser útil:

El código que llama a Trigger debe ir después de que se llama al evento.

Por ejemplo, tengo un código que quiero ejecutar cuando se cambia el valor de #expense_tickets y también cuando se vuelve a cargar la página

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

})

jQuery .trigger('click');solo hará que se active un evento en este evento, no activará también la acción predeterminada del navegador.

Puede simular la misma funcionalidad con el siguiente 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;
    }
});

Prueba esto que funciona para mí:

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

He intentado las dos respuestas principales, no funcionó para mí hasta que eliminé "display: none" de los elementos de entrada de mi archivo. Luego volví a .trigger () también funcionó en safari para windows.

Por lo tanto, no utilice display: none; para ocultar su entrada de archivo , puede usar opacidad: 0 en su lugar.

Técnicamente no es una respuesta a esto, pero es un buen uso de la respuesta aceptada ( https://stackoverflow.com/a/20928975/82028 ) para crear botones siguiente y anterior para las pestañas en los campos de 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();
});

Solo usa esto:

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

No puede simular un evento de clic con javascript. La .trigger()función jQuery solo dispara un evento llamado "clic" en el elemento, que puede capturar con el .on()método jQuery.