54

これについては 100 万件の投稿があると思いますが、驚くべきことに、何かを見つけるのに苦労しています。

<A>ページの初期化時にリンクの onClick ハンドラーを設定する簡単なスクリプトがあります。

これを実行すると、すぐに「foo」アラート ボックスが表示され、リンクをクリックしたときにのみアラートが表示されるはずでした。

私が間違っている愚かなことは何ですか？（クリック=とオンクリック=を試しました）...

<script language="javascript">

    function init(){

        document.getElementById("foo").click = new function() { alert('foo'); };
    }

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

編集:受け入れられた回答をjQueryの回答に変更しました。「 MárÖrlygsson 」による回答は、技術的には私の元の質問に対する正しい回答です（削除する必要clickがonclickあります）が、コードで「document.getElementById（...）」を直接使用すること、および代わりにjQueryを使用することを強くお勧めします.new

4

11 に答える 11

73

試す：

document.getElementById("foo").onclick = function (){alert('foo');};
于 2008-10-30T02:06:55.467 に答える
36

.onclick(すべて小文字)を使用します。そのようです：

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

実際には、いくつかの優れたライブラリ (いくつかの理由からjQueryをお勧めします) を使用して起動し、クリーンな JavaScript を記述したほうがよいことに気付くでしょう。

クロスブラウザー (非) 互換性は、誰にとっても対処するのに最適な地獄です。

于 2008-10-30T02:10:47.733 に答える
23

jQuery:

$('#foo').click(function() { alert('foo'); });

または、リンク href をたどりたくない場合:

$('#foo').click(function() { alert('foo'); return false; });
于 2008-10-30T02:10:13.603 に答える
13

I tried more or less all of the other solutions the other day, but none of them worked for me until I tried this one:

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

As far as I can tell, it works perfectly.

于 2009-12-23T14:59:20.833 に答える
11

現在の関数から変数を渡したい場合、これを行う別の方法は次のとおりです。

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

この関数から情報を渡す必要がない場合は、次のようにします。

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
于 2011-05-07T12:10:00.740 に答える
5

OMG...「jQuery Library」と「getElementById」だけの問題ではありません。

確かに、jQuery はクロスブラウザーの問題を脇に置くのに役立ちますが、JavaScript を十分に理解していれば、ライブラリーを使用しない従来の方法を使用しても問題なく動作します!!!

@MárÖrlygssonと@DarrylHeinの両方が、前者が従来の方法を使用し、後者がjQueryの方法を使用した、優れた代替手段（私は、それらは単なる代替手段であり、アンサーではないと言いたい）を提供しました。しかし、あなたは本当にあなたの問題に対する答えを知っていますか? コードの何が問題になっていますか?

まず、.clickjQuery の方法です。従来の方法を使用する場合は、代わりに .onclick を使用してください。または、混乱する場合に備えて、jQuery のみを使用することを集中して学習することをお勧めします。jQuery は、DOM を十分に理解していなくても使用できる優れたツールです。

2 番目の問題は、これも重大な問題new function(){}ですが、構文が非常に悪い、または構文が間違っているということです。

jQuery を使用するかどうかに関係なく、それを明確にする必要があります。

関数を宣言する基本的な方法は 3 つあります。

function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object

JavaScript では大文字と小文字が区別されるためnew function()、JavaScript の標準構文ではないことに注意してください。ブラウザが意味を誤解している可能性があります。

したがって、コードは 2 番目の方法を使用して変更できます。

 = function(){alert();}

または、3番目の方法を次のように使用します

 = new Function("alert();");

詳しく説明すると、2 番目の方法は 3 番目の方法とほぼ同じように機能し、2 番目の方法は非常に一般的ですが、3 番目の方法はまれです。どちらの最良の回答も 2 番目の方法を使用しています。

ただし、「ランタイム」と「コンパイル時間」のために、3 番目の方法は 2 番目の方法ではできないことを行うことができます。new Function()時々役立つことを知っていただければ幸いです。を使用して問題に遭遇しfunction(){}た日は、 を忘れないでくださいnew Function()。

さらに理解するには、O'Reilly の << JavaScript: The Definitive Guide, 6th Edition >> を読むことをお勧めします。

于 2013-01-15T08:28:02.650 に答える
2

jQuery を使用することが最善の選択肢であることに同意します。また、body の onload 関数の使用を避け、代わりに jQuery の ready 関数を使用する必要があります。イベント リスナーに関しては、引数を 1 つ取る関数にする必要があります。

document.getElementById("foo").onclick = function (event){alert('foo');};

またはjQueryで：

$('#foo').click(function(event) { alert('foo'); }
于 2008-10-30T07:37:12.287 に答える
0

上記のYUIの例は、実際には次のようになります。

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>
于 2010-03-16T11:40:43.653 に答える
0

アラートが発行された理由を説明するために、実際に発生していた問題に誰も対処しませんでした。

このコード:要素のクリック プロパティを空のオブジェクトにdocument.getElementById("foo").click = new function() { alert('foo'); };割り当てます。#fooここにある無名関数は、オブジェクトを初期化するためのものです。このタイプの関数をコンストラクターと考えるのが好きです。そこにアラートを配置すると、関数がすぐに呼び出されるため、呼び出されます。

この質問を参照してください。

于 2012-05-24T19:51:45.130 に答える
0

jQuery の.bindメソッドと.unBindメソッドを使いたいと思います。私のテストでは、.click と .onclick を使用してクリック イベントを変更すると、実際には新しく割り当てられたイベントが呼び出され、終わりのないループが発生しました。

たとえば、切り替えるイベントが hide() と unHide() で、一方をクリックするとクリック イベントが他方に切り替わると、連続ループに陥ります。より良い方法は、これを行うことです：

$(element).unbind().bind( 'click' , function(){ alert('!') } );
于 2012-04-04T21:38:51.107 に答える