appeler la fonction javascript en cliquant sur le lien hypertexte

Je crée dynamiquement un lien hypertexte dans le code c # derrière le fichier d'ASP.NET. J'ai besoin d'appeler une fonction JavaScript lors du clic client. comment puis-je y parvenir?

Plus soigné encore, au lieu du typical href="#"ou href="javascript:void"ou 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é.

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

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

Ou pour répondre à la question de l'appel d'une fonction javascript:

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

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

Avec le paramètre onclick ...

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

La réponse JQuery. Depuis que JavaScript a été inventé pour développer JQuery, je vous donne un exemple dans JQuery faisant ceci:

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

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

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

Idéalement, j'éviterais complètement 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'intègre pas vos «appels» javascript dans votre 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é commune), puis utilisez Progressive Enhancement pour ajouter le ou les gestionnaires d'événements, quelque chose comme:

[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 cette façon, votre code ne cassera pas pour les utilisateurs avec JS désactivé et il aura une séparation claire des préoccupations.

J'espère que c'est utile.

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 permettent de créer plusieurs gestionnaires d'événements.

Utilisez l' onclickattribut HTML .

Le onclickgestionnaire d'événements capture un événement de clic à partir du bouton de la souris des utilisateurs sur l'élément auquel l' onclickattribut est appliqué. Cette action aboutit généralement à un appel à une méthode de script telle qu'une fonction JavaScript [...]

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 fonctionner pour 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>