web-dev-qa-db-fra.com

appelez la fonction javascript sur l'hyperlien cliquez sur

Je crée dynamiquement un lien hypertexte dans le code c # derrière le fichier ASP.NET. J'ai besoin d'appeler une fonction JavaScript sur un clic client. Comment puis-je accomplir cela?

javascripthyperlink
77
ErnieStings

Plus pratique encore, au lieu du typical href="#" ou du href="javascript:void" ou du href="whatever", je pense que cela a beaucoup plus de sens:

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 échoue, il y a des commentaires. De plus, le comportement erratique (saut de page dans le cas de href="#", visite de la même page dans le cas de href="") est éliminé.

120
karim79

La réponse la plus simple de tous est ...

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

Ou pour répondre à la question d'appeler une fonction javascript:

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

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

Avec le paramètre onclick ...

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

La réponse de JQuery. Depuis que JavaScript a été inventé pour développer JQuery, voici un exemple dans JQuery:

<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>
13
elcuco

Dans l’idéal, j’éviterais de générer des liens dans votre code, car votre code devra être recompilé chaque fois que vous souhaitez modifier le «balisage» de chacun de ces liens. Si vous devez le faire, je n'incorporerais pas vos "appels" javascript dans votre code HTML. C'est une mauvaise pratique. Votre balisage doit décrire votre document et non ce qu'il fait, c'est le travail de votre javascript.

Utilisez une approche où vous avez un identifiant spécifique pour chaque élément (ou classe si sa fonctionnalité est commune), puis utilisez Progressive Enhancement pour ajouter le (s) gestionnaire (s) d'événements, comme par exemple:

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

Ainsi, votre code ne sera pas interrompu pour les utilisateurs dont JS est désactivé et les préoccupations sont clairement séparées.

J'espère que c'est utile.

4
Lewis

Je préfère utiliser la méthode onclick plutôt que la méthode href pour les liens hypertextes javascript. Et toujours utiliser des alertes pour déterminer quelle valeur avez-vous.

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

Il pourrait également être utilisé sur les balises d'entrée, par exemple.

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

4
Marky

Je recommanderais généralement d'utiliser element.attachEvent (IE) ou element.addEventListener (autres navigateurs) plutôt que de définir l'événement onclick directement, car ce dernier remplacera tous les gestionnaires d'événements existants pour cet élément.

attachEvent/addEventListening permet à plusieurs gestionnaires d'événements d'être créés.

2
Simon

Utilisez l'attribut HTML onclick HTML .

Le gestionnaire d'événements onclick capture un cliquez sur l'événement de la souris de l'utilisateur bouton sur l'élément auquel le L'attribut onclick est appliqué. Ce une action entraîne généralement un appel à un méthode de script telle que JavaScript une fonction [...]

1
Donut

Si vous n'attendez pas que la page soit chargée, vous ne pourrez pas sélectionner l'élément par identifiant. Cette solution devrait convenir à toute personne ayant des difficultés à exécuter le code 

<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>
0
user2197701