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


145

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.


2
jQuery triggersolo funciona si se agrega cualquier evento 'jQuery click`. De lo contrario, no podrá hacer nada de esta manera;
Reza Mamun

3
Esta es una medida de seguridad integrada en el navegador. Ver la respuesta de @ Blazemonger: stackoverflow.com/questions/7999806/…
sanchez

1
@ san.chez Interesante, gracias por la información, ¡no sabía sobre esta medida de seguridad antes!
lickmycode

Respuestas:


277

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/


18
me salvaste el día $ ('# asd') [0] .click ();
waza123

Lo usé para hacer clic en la siguiente pestaña en los campos de jQuery ACF: $ ('. Next'). Haga clic en (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .click ();});
Tisch

1
Gracias. Funciona en escritorio. Pero en el móvil (Android Chrome) no lo hace. ¿alguna sugerencia?
kk-dev11

Por alguna razón, esto destruye el hash en la URL actual.
luis

1
si uno de los hrefs en la etiqueta <a es '#', eso lo haría. <a normalmente redirige a una URL diferente. Debe detenerlo con ev.preventDefault () y ev.stopPropagation () antes de que vuelva su controlador de clics. O, use alguna otra etiqueta además de <a; puede adjuntar controladores de clic a cualquier cosa que sea visible.
OsamaBinLogin

43

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

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

Funciona perfecto si está intentando simular un clic cuando se carga la página.
Gabriel Dzul

33

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

Gracias por la explicacion. Comportamiento muy irritante de jQuery, pero su código funciona.
lickmycode

No es irritante en absoluto. trigger()está destinado a ejecutar la parte de JavaScript del evento de clic . Es muy similar a crear una function var() {}que se reutilice varias veces.

21

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

Lo envolvería this.click();en unelse if(this.click)
Alex W

15

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

})

44
Ahhh ese fue mi problema también! Estaba desconcertado de por qué trigger()no funcionaba. Resulta que tenía el código de activación establecido POR ENCIMA de la función que estaba llamando, por lo que el gancho no estaba realmente en su lugar. Doh!
Andrew Newby

5

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

2

Prueba esto que funciona para mí:

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

0

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.


0

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

0

Solo usa esto:

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

-3

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.


9
"No puede simular un evento de clic con javascript" - Sí, puede hacerlo .
nnnnnn

Incorrecto ... puede simular un evento de clic con javascript / jquery y puede capturar un evento de clic de activación con .click sin activar.
Aerious
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.