¿Cómo puedo simular un clic de anclaje mediante jquery?


144

Tengo un problema al fingir un clic de anclaje a través de jQuery: ¿Por qué aparece mi caja gruesa la primera vez que hago clic en el botón de entrada, pero no la segunda o la tercera vez?

Aquí está mi código:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Siempre funciona cuando hago clic directamente en el enlace, pero no si trato de activar el cuadro grueso mediante el botón de entrada. Esto está en FF. Para Chrome parece funcionar todo el tiempo. ¿Alguna pista?


1
Estás dejando fuera el código aquí. No hay ningún código asociado con el evento de clic para el ancla que nos ha mostrado. ¿Qué hace ese código? ¿Hay algún otro código involucrado?
Matt

1
@Matt Si usa el método de clic sin parámetros, ya no se interpreta como un enlace de evento, en realidad HAGA CLIC (como si fuera a hacer clic con el mouse) en el elemento al que está encadenado. En este caso, cuando se hace clic en el elemento de entrada, también se debe hacer clic en el elemento con ID 'thickboxId'.
KyleFarris

3
@KyleFarris: El evento click () no funciona en Chrome o Safari a menos que el elemento en el que se hace clic tenga un evento onclick adjunto, y todavía solo activará esa parte y no navegará al valor href. En el caso anterior, quiere que navegue a la propiedad href de la etiqueta A, como si el usuario hubiera hecho clic en el enlace.
Senseful

Respuestas:


123

Intenta evitar incluir tus llamadas de jQuery de esa manera. Coloque una etiqueta de script en la parte superior de la página para vincularla al clickevento:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

Editar:

Si está tratando de simular que un usuario haga clic físicamente en el enlace, entonces no creo que sea posible. Una solución alternativa sería actualizar el clickevento del botón para cambiar el window.locationJavascript en:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

Edición 2:

Ahora que me doy cuenta de que Thickbox es un widget personalizado de jQuery UI, encontré las instrucciones aquí :

Instrucciones:

  • Crear un elemento de enlace ( <a href>)

  • Dele al enlace un atributo de clase con un valor de thickbox ( class="thickbox")

  • En el hrefatributo del enlace, agregue el siguiente ancla:#TB_inline

  • En el hrefatributo después de #TB_inlineagregar la siguiente cadena de consulta en el ancla:

    ? height = 300 & width = 300 & inlineId = myOnPageContent

  • Cambie los valores de altura, ancho e inlineId en la consulta en consecuencia (inlineID es el valor de ID del elemento que contiene el contenido que desea mostrar en un ThickBox.

  • Opcionalmente, puede agregar modal = true a la cadena de consulta (por ejemplo #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) para que cerrar un ThickBox requiera llamar a la tb_remove()función desde el ThickBox. Vea el ejemplo de contenido modal oculto, donde debe hacer clic en sí o no para cerrar ThickBox.


window.location en el controlador de clics no funciona, ya que el cuadro grueso no funciona como se esperaba.
prinzdezibel

En el segundo ejemplo, puede ser aconsejable usar en .prop()lugar de attr()obtener la URL resuelta.
Kevin Bowersox

Me sorprende que esta sea la respuesta aceptada. El activador de clic solo funcionará en el elemento DOM nativo, no en el elemento contenedor jQuery. Esto es discutido por @Stevanicus y comentarios, y en varias otras publicaciones SO. La respuesta debe cambiarse a la de Stevanicus.
Oliver

@Schollii: siéntase libre de editarlo a la corrección deseada.
John Rasch

3
Quise decir que la respuesta aceptada debería ser la de @stevanicus
Oliver

194

Lo que funcionó para mí fue:

$('a.mylink')[0].click()

1
. dona que la siguiente parte es un nombre de clase. # sería para una identificación.
Stevanicus

3
Si es necesario para una entrada, focusclick
úsela en

Esto también funciona para mí, pero ¿por qué funciona? ¿Por qué $ ('a.mylink') [0] .click () funciona pero $ ('a.mylink'). Eq (0) .click () no funciona?
ChrisC

44
[0]indica el primer elemento de la matriz: un selector devuelve 0 o más elementos cuando se ejecuta. Es desafortunado que .click()no parezca funcionar directamente aquí, ya que aparentemente otras invocaciones se aplican a colecciones de elementos de selectores consistentemente en todo el marco.
cfeduke

8
Usando [0]o .get(0)son lo mismo. Estos usan la versión DOM del elemento, en lugar de la versión jQuery. La .click()función en este caso no es el evento de clic jQuery, sino el evento nativo.
Radley Sustaire

19

Recientemente he encontrado cómo activar el evento de clic del mouse a través de jQuery.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

1
No creo que esto funcione en IE, al menos no 7 u 8, porque no parece haber un método createEvent en el documento.
Jeremy

Como dice Eagle, esto funciona en los navegadores webkit. Pero tenga en cuenta que realmente no está utilizando jQuery aquí (aparte de la selección $)
tokland

1
le falta la mitad de la magia: stackoverflow.com/questions/1421584/…
daniloquio

9

Este enfoque funciona en Firefox, Chrome e IE. Espero que ayude a alguien:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

Muy útil y la mejor opción debido a la compatibilidad cruzada en mi opinión. No me gusta tener que envolver todo en bloques try / catch, pero entiendo que esto se hace en cascada para cada navegador.
h0r53

8

Aunque esta es una pregunta muy antigua, encontré algo más fácil de manejar esta tarea. Es el complemento jquery desarrollado por el equipo jquery UI llamado simulate. puedes incluirlo después de jquery y luego puedes hacer algo como

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

funciona bien en Chrome, Firefox, Opera e IE10. Puede descargarlo desde https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js


Una característica clave de simulate()es que envía los eventos de jQuery y activa la acción del navegador nativo. Esta es ahora la respuesta correcta +1
Gone Coding

Funciona de maravilla y me permite abrir la página en una nueva pestaña cuando el usuario hace clic en un botón en mi cuadrícula de kendo.
John Sully

6

El título de la pregunta dice "¿Cómo puedo simular un clic de anclaje en jQuery?". Bueno, puedes usar los métodos "trigger" o "triggerHandler", así:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

No probado, este script real, pero he usado trigger et al antes, y funcionaron bien.

ACTUALIZACIÓN en
triggerHandler realidad no hace lo que quiere el OP. Creo que 1421968 proporciona la mejor respuesta a esta pregunta.



4

Creo que puedes usar:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

Esto activará fácilmente la función de clic, sin hacer clic en ella.


2

¿Necesitas fingir un clic de anclaje? Desde el sitio de thickbox:

ThickBox se puede invocar desde un elemento de enlace, un elemento de entrada (generalmente un botón) y el elemento de área (mapas de imagen).

Si eso es aceptable, debería ser tan fácil como poner la clase thickbox en la entrada:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

De lo contrario, recomendaría usar Firebug y colocar un punto de interrupción en el método onclick del elemento de anclaje para ver si solo se activa en el primer clic.

Editar:

De acuerdo, tuve que probarlo por mí mismo y para mí casi exactamente su código funcionó tanto en Chrome como en Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

La ventana emergente no importa si hago clic en la entrada o en el elemento de anclaje. Si el código anterior funciona para usted, sugiero que su error se encuentre en otra parte y que intente aislar el problema.

Otra posibilidad es que estamos usando diferentes versiones de jquery / thickbox. Estoy usando lo que obtuve de la página de thickbox: jquery 1.3.2 y thickbox 3.1.


Sí, necesito falsificarlo y sí, el controlador de clics funciona. Pero, de hecho, no configuré el evento onclick en absoluto y funciona, pero solo la primera vez. Pero también con onclick manejado en thickboxId no funcionará.
prinzdezibel

Lo que quise decir fue verificar que el onclick en el elemento de anclaje se active cada vez que haga clic en el elemento de entrada. Ah, y mira mi edición arriba.
waxwing

2

Puede crear un formulario a través de jQuery o en el código de la página HTML con una acción que imite su enlace href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

Este método hace que la página entera se vuelva a cargar en lugar de simplemente saltar a un ancla. Además, también agrega el "?" a la URL para que la página se convierta en example.com?#test en lugar de example.com # test . Probado en Chrome y Safari.
Senseful

En FF esto funcionará bien. En los exploradores de Webkit, obtendrá las URL como se describe en Senseful. Pero esto no es problema, ¿no?
comenzó el

2

Para simular un clic en un ancla mientras aterrizaba en una página, simplemente utilicé jQuery para animar la propiedad scrollTop en $(document).ready.Sin necesidad de un disparador complejo, y eso funciona en IE 6 y en cualquier otro navegador.


2

Si no necesita usar JQuery, como yo no. He tenido problemas con la función de navegador cruzado de .click(). Entonces uso:

eval(document.getElementById('someid').href)

Rápido y sucio, pero funcionó para mí. En jQuery esto es eval ($ ("# someid"). Attr ("href"));
mhenry1384

2

En Javascript puedes hacer así

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

y puedes usarlo como

submitRequest("target-element-id");

1

Utilizando el script de Jure, hice esto para "hacer clic" fácilmente en tantos elementos como desee.
¡Acabo de usar Google Reader en más de 1600 artículos y funcionó perfectamente (en Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

No creo que esto funcione en IE, al menos no 7 u 8, porque no parece haber un método createEvent en el documento.
Jeremy

Creo que document.createEventObject () debería usarse en IE en su lugar, pero no lo he probado.
fregante

@ bfred.it: Parece que createEventObjecten IE es más para crear un objeto de evento para pasar a los controladores, en lugar de enviar un evento sintético. Los IE fireEventpueden estar más cerca dispatchEvent, pero solo activará oyentes, no acciones predeterminadas del navegador. Sin embargo, en IE solo puede llamar al clickmétodo.
theazureshadow

1

JQuery('#left').triggerHandler('click');funciona bien en Firefox e IE7. No lo he probado en otros navegadores.

Si desea activar clics automáticos de usuario, haga lo siguiente:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

1

Esto no funciona en el navegador nativo de Android para hacer clic en "elemento de entrada oculta (archivo)":

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

Pero esto funciona:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

0

Al tratar de simular un 'clic' en las pruebas unitarias con la flecha giratoria jQuery UI, no pude obtener ninguna de las respuestas anteriores para trabajar. En particular, estaba tratando de simular el 'giro' de seleccionar la flecha hacia abajo. Miré las pruebas unitarias spinner jQuery UI y utilizar el siguiente método, que trabajó para mí:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
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.