ハイパーリンクをクリックしてjavascript関数を呼び出す

ASP.NETのc＃コードビハインドファイルにハイパーリンクを動的に作成しています。クライアントのクリックでJavaScript関数を呼び出す必要があります。どうすればこれを達成できますか？

それでも、typical href="#"orまたはhref="javascript:void"orの代わりに、href="whatever"これははるかに理にかなっていると思います。

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>

Javascriptが失敗した場合、いくつかのフィードバックがあります。さらに、不規則な動作（の場合はページジャンプ、の場合はhref="#"同じページにアクセスするhref=""）が排除されます。

すべての中で最も簡単な答えは...

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

または、JavaScript関数を呼び出す質問に答えるには：

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

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

onclickパラメータを使用して...

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

JQueryの答え。JavaScriptはJQueryを開発するために発明されたので、これを行う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>

私はjavascriptハイパーリンクのhrefよりもonclickメソッドを使用することを好みます。また、常にアラートを使用して、どのような価値があるかを判断してください。

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

入力タグにも使用できます。

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

理想的には、各リンクの「マークアップ」に変更を加えるたびにコードを再コンパイルする必要があるため、コードの背後にリンクを生成することは避けます。あなたがそれをしなければならないなら、私はあなたのJavaScriptの「呼び出し」をあなたのHTMLの中に埋め込まないでしょう、それは完全に悪い習慣です、あなたのマークアップはそれが何をするかではなくあなたの文書を説明するべきです、それはあなたのjavascriptの仕事です。

各要素（またはその共通機能の場合はクラス）に特定のIDがあるアプローチを使用してから、プログレッシブエンハンスメントを使用して次のようなイベントハンドラーを追加します。

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

そうすれば、JSが無効になっているユーザーのコードが壊れることはなく、関心の分離が明確になります。

それがお役に立てば幸いです。

通常、onclickイベントを直接設定するよりもelement.attachEvent（IE）またはelement.addEventListener（他のブラウザー）を使用することをお勧めします。後者はその要素の既存のイベントハンドラーを置き換えるためです。

attachEvent / addEventListeningを使用すると、複数のイベントハンドラーを作成できます。

onclickHTML属性を使用します。

onclickイベントハンドラは、先の要素に、ユーザーのマウスボタンからクリックイベントをキャプチャし onclick、属性が適用されます。このアクションにより、通常、JavaScript関数などのスクリプトメソッドが呼び出されます[...]

ページが読み込まれるのを待たないと、IDで要素を選択できなくなります。このソリューションは、コードの実行に問題がある人に役立つはずです

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