Cómo activar un clic en un enlace usando jQuery

239

Tengo un enlace:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

y estoy tratando de activarlo usando:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Pero no funciona.

También he intentado: $('#titleee a').trigger('click');

Editar :

De hecho, necesito activar lo que se llame aquí <a href="#inline" rel="prettyPhoto">

jquery triggers click

— Patrioticcow
fuente

77

location.href($('#titleee').find('a').attr("href"));?

— Sylvain

3

o incluso $ ('ul.gallery'). find ('li> a'). trigger ('click');

— CarneyCode

114

Chicos La verdadera respuesta es muy simple. $('#titleee a')[0].click();. En otras palabras, use el método de clic DOM, no el jQuery. ¡Vota Graham Hotchkiss !

— Roman Starkov

55

@romkyns no, no está bien, ya que abre una ventana emergente en lugar de una nueva pestaña. pero hacer clic en un espacio ficticio dentro de esta etiqueta 'a' sirve para el propósito

— Shishir Arora

1

Si está intentando desencadenar un evento en el ancla, el código que tenga funcionará. $('ul#titleee li a[href="#inline"]').click();

— Anand Pal

310

Si está intentando desencadenar un evento en el ancla, entonces el código que tiene funcionará. Volví a crear su ejemplo en jsfiddle con un eventHandler agregado para que pueda ver que funciona:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

¿Está tratando de hacer que el usuario navegue a un cierto punto en la página web haciendo clic en el ancla, o está tratando de activar eventos vinculados a él? ¿Quizás no ha vinculado el evento de clic con éxito al evento?

También esto:

$('#titleee').find('a').trigger('click');

es el equivalente de esto:

$('#titleee a').trigger('click');

No es necesario llamar a buscar. :)

— Kit Sunde
fuente

16

@Kit .find () es un selector más rápido de lo que está proponiendo, haga un punto de referencia si no está de acuerdo pero su propuesta lo ralentiza. positivamente :-)

— Ady Ngom

14

@mashappslabs: está bien. Estoy feliz por ti si sientes la necesidad de hacer optimizaciones prematuras y micro, no importa cuán cierto sea. :)

— Kit Sunde

55

@Kit ... así que cuando haces una declaración como "no es necesario llamar a find", ¿no cae en el ámbito de la optimización prematura? Creo que sí, pero resulta ser más lento de lo que se propuso al principio. No estoy respondiendo por el argumento, sino por un esfuerzo concertado para mejorar en lo que todos amamos hacer. Espero que esto salga bien :-)

— Ady Ngom

55

@mashappslabs: habiendo visto jsperf.com por primera vez, pensé en volver y decir que tienes razón, tu método es más rápido en el caso general. Solo Opera es más lenta. jsperf.com/jquery-selector-perf-right-to-left/32

— Kit Sunde

99

Curiosamente, lo anterior no funciona para mí, pero la respuesta de @GrahamHotchkiss sí.

— Oliver

210

Lo sentimos, pero el controlador de eventos realmente no es necesario. Lo que necesita es otro elemento dentro de la etiqueta para hacer clic.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

Esto se trata de lo que está haciendo clic y no es la etiqueta sino lo que contiene. Desafortunadamente, JQuery no parece reconocer el texto sin formato, pero sí lo es mediante javascript vainilla:

document.getElementById('test1').click(); // Works!

O accediendo al objeto jQuery como una matriz

$('#test1')[0].click(); // Works too!!!

— Graham Hotchkiss
fuente

99

$ ('selector') [0] .click () en realidad manejará al menos un caso que no activará el controlador de eventos: hacer que el navegador lo reconozca como un clic real para activar un enlace de controlador de protocolo. Llamar al activador en el evento de clic no hará que se inicie la aplicación asociada. ¡Gracias por incluirlo en tu respuesta!

— Greg Pettit

3

Sí, ¡ .click()eso es precisamente lo que necesitaba!

— notacouch

3

$ ('# test2 span'). trigger ('clic'); ayudó, ya que puede abrir una url en una pestaña nueva pero $ ('# test1') [0] .click (); Estaba abriendo una ventana emergente.

— Shishir Arora

Cuando trato de manejar, haga clic en el elemento de fondo: $ ('# titleee a'). Trigger ('click'); -> ¡No funciona! $ ('# titleee a') [0] .click (); -> Funciona!

— 18 de agosto

1

$ ('# test1') [0] .click (); Es un salvador. Muchas gracias

— Amit Bisht

18

Dado que esta pregunta ocupa el puesto número 1 en Google por "activar un clic en un <a>elemento" y ninguna respuesta menciona realmente cómo lo hace, así es como lo hace:

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

Explicación: activa un clickelemento html subyacente, no el objeto jQuery .

De nada googlers :)

— Alex
fuente

2

"activa un clic en el elemento html subyacente, no en el objeto jQuery". - Esto hizo clic para mí, gracias!

— Frish

5

Con el código que proporcionó, no puede esperar que pase nada. Segundo @mashappslabs: primero agrego un controlador de eventos:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

luego active su evento:

$("selector").click(); //or
$("selector").trigger("click");

y deberías ver el mensaje en tu consola.

— Julz
fuente

55

Esto no funciona para mí: si el selector es "a" (etiqueta HTML para enlaces, para ser claros), la función anónima se llama cuando llamo trigger, pero la acción de la etiqueta no ocurre. Es como si el evento no se propagara al elemento DOM asociado. La respuesta de @GrahamHotchkiss es la única que funciona de manera confiable para mí.

— Oliver

5

Si está intentando desencadenar un evento en el ancla, el código que tenga funcionará.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

O

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

O

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});

— Anand Pal
fuente

3

Bueno, primero debe configurar el evento de clic y luego puede activarlo y ver qué sucede:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');

— Ady Ngom
fuente

3

Esta es la demostración de cómo activar un evento

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>

— Harshad Hirapara
fuente

3

Para los enlaces esto debería funcionar:

eval($(selector).attr('href'));

— Amin
fuente

2

Esto no responde exactamente a su pregunta, pero le dará el mismo resultado con menos dolor de cabeza.

Siempre tengo mis métodos de llamada de eventos de clic que contienen toda la lógica que me gustaría ejecutar. Para que pueda llamar al método directamente si quiero realizar la acción sin un clic real.

— Matthew Vines
fuente

2

Debe llamar al .click()método nativo del elemento o usar la createEventAPI.

Para obtener más información, visite: https://learn.jquery.com/events/triggering-event-handlers/

— George Filippakis
fuente

66

¡Bienvenido a Stack Overflow! Si bien esto podría ser una pista valiosa para resolver el problema, una buena respuesta también demuestra la solución. Por favor edición para proporcionar código de ejemplo para mostrar lo que quiere decir. Alternativamente, considere escribir esto como un comentario.

— Toby Speight