llame la función javascript en el hipervínculo haga clic en

Question

Estoy creando dinámicamente un hipervínculo en el código C# detrás del archivo de ASP.NET. Necesito llamar a una función de JavaScript en el clic del cliente. ¿Cómo logro esto?

Answer 1

más limpio todavía, en lugar de la typical href="#" o href="javascript:void" o href="whatever", creo que esto tiene mucho más sentido:

var el = document.getElementById('foo'); 
el.onclick = showFoo; 


function showFoo() { 
    alert('I am foo!'); 
    return false; 
} 

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a> 

Si Javascript falla, hay algunos comentarios. Además, se elimina el comportamiento errático (salto de página en el caso de href="#", visitando la misma página en el caso de href="").

Answer 2

Con el parámetro onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a> 

Answer 3

Utilice la onclick HTML attribute.

El controlador de eventos onclick captura un evento clic desde el botón del ratón de los usuarios en el elemento al que se aplica el atributo onclick. Esta acción lo general resulta en una llamada a un método la escritura como una función de JavaScript [...]

Answer 4

Lo ideal sería evitar la generación de enlaces en su código por completo, ya que su código necesitará recompilar cada vez que quiera hacer un cambio en el 'marcado' de cada uno de esos enlaces. Si tiene que hacerlo, no insertaría sus 'llamadas' de javascript dentro de su HTML, es una mala práctica, su marcado debe describir su documento, no lo que hace, ese es el trabajo de su javascript.

utilizar un enfoque donde se tiene una identificación específica para cada elemento (o clase si su funcionalidad común) y luego usar la consolidación progresiva para agregar el controlador de eventos (s), algo así como:

[c# example only probably not the way you're writing out your js] 
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>"); 

[Javascript] 
document.getElementById('uxAncMyLink').onclick = function(e){ 

// do some stuff here 

    return false; 
    } 

De esa manera su código no se romperá para los usuarios con JS desactivado y tendrá una clara separación de preocupaciones.

Espero que sea de uso.

Answer 5

En general, recomendaría usar element.attachEvent (IE) o element.addEventListener (otros navegadores) sobre la configuración del evento onclick directamente ya que este último reemplazará cualquier controlador de eventos existente para ese elemento.

attachEvent/addEventListening permiten crear múltiples controladores de eventos.

Answer 6

La respuesta de JQuery. Desde JavaScript se inventó con el fin de desarrollar jQuery, te estoy dando un ejemplo en jQuery hacer esto:

<div class="menu"> 
    <a href="http://example.org">Example</a> 
    <a href="http://foobar.com">Foobar.com</a> 
</div> 

<script> 
jQuery('div.menu a') 
    .click(function() { 
     do_the_click(this.href); 
     return false; 
    }); 

// play the funky music white boy 
function do_the_click(url) 
{ 
    alert(url); 
} 
</script> 

Answer 7

Yo prefiero usar el método onclick en lugar de la href para hipervínculos de JavaScript. Y siempre use alertas para determinar qué valor tiene.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

Podría ser también utilizado en las etiquetas de entrada por ejemplo.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

Answer 8

La respuesta más sencilla de todas es ...

<a href="javascript:alert('You clicked!')">My link</a>

o para responder a la cuestión de llamar a una función javascript:

<script type="text/javascript"> 
 
function myFunction(myMessage) { 
 
    alert(myMessage); 
 
} 
 
</script> 
 

 
<a href="javascript:myFunction('You clicked!')">My link</a>

Answer 9

Si no espera a que se cargue la página, no podrá seleccionar el elemento mediante el id. Esta solución debería funcionar para cualquier persona que tenga problemas para conseguir el código para ejecutar

<script type="text/javascript"> 
window.onload = function() { 
    document.getElementById("delete").onclick = function() {myFunction()}; 

    function myFunction() { 
     //your code goes here 
     alert('Alert message here'); 
    } 
}; 
</script> 

<a href='#' id='delete'>Delete Document</a>