0

ボタンの押下を検出するためのJavaScriptコードを書き始めました。私はすべての異なる方法をグーグルで調べてきました。それらのいくつかが私のコードで機能したり機能しなかったりしたとき、私は困惑しました。

これは、4 つの例を持つ JS Fiddleです。

#1または#4が機能しない理由を誰か説明できますか?

これがhtmlテストコードです。

<input type ='button'  value = "Test Button 1" id="Test_Button1" >
<input type ='button'  value = "Test Button 2" id="Test_Button2" >
<input type ='button'  value = "Test Button 3" id="Test_Button3" >
<input type ='button'  value = "Test Button 4" id="Test_Button4" >

ここにJavaScriptコードがあります

$('Test_Button1').click (function() {
    alert("Test Button 1 worked");
});


$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});


document.getElementById('Test_Button3').onclick = function() {
        alert("Test Button 3 worked");
};


$(document).ready (function () {
        $('Test_Button4').click (function() {
            alert("Test Button 4 worked");
    });
});
4

5 に答える 5

2

id最初のものについては、使用する必要がある要素のとして呼び出している#ため、

$('#Test_Button1').click(function() {
        alert("Test Button 1 worked");
});

最後のものについても同じことですが、. を追加する必要があります#。

http://jsfiddle.net/ez2SP/1/

于 2013-03-13T01:32:59.710 に答える
1

$ が jQuery であると仮定すると、#1 と #4 の # 記号が欠落しています。

于 2013-03-13T01:34:03.323 に答える
1

<Test_Button4>#1 と #4 は要素を探します。id属性で要素を取得するには、次を使用する必要があり#ます。

#Test_Button4
于 2013-03-13T01:35:49.707 に答える
0

指摘されているように、あなたのコードの一部は間違っていますが、それは例のためだけだと思います. id のボタンにアクセスする$('#Test_Button1')には ( の追加に注意してください)を使用する必要があります。#Test_Button1

技術的に言えば、要素イベントに反応する方法はいくつかあり、それらのほとんどを使用する理由があります。

このコード:

$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});

... jQueryを介してイベント委任（読み取り）を使用しています。基本的に、個々の要素にイベント リスナーを追加する代わりに、親要素 (この場合はドキュメント自体) にイベント リスナーを追加します。イベントがバブリングするため ( readとread )、ボタンをクリックすると、最終的にイベントがデリゲート リスナーをトリガーします。これは、ページのコンテンツを追加または変更する場合 (たとえば、AJAX を使用) に最も役立ちます。ページに追加された新しい要素は、リスナーが実際にドキュメントに関連付けられているため、個別に処理する必要なくイベントをトリガーします。

ラッパーのコードdocument.ready(それ自体がイベント リスナー) は、DOM の準備が整ったときにトリガーされます [ doc ]。ドキュメントが読み込まれると、他のコードが実行されます。ブロックには何でもラップできますがdocument.ready、個別のメソッドを表すものではありません。

あなたが示す例のいくつかは同じものです。を使用on()してデリゲートを追加することも、使用することもできますclick()-- 後者は前者のエイリアスです。また、より最近のバージョンでlive()置き換えられたコードが実際に出回っていることもわかります。on()

onclickは HTML 要素のプロパティであり、イベントをインラインで配置するのと同じです: <button onclick="alert('do not do this');">Yay!</button>.

イベントリスナーの追加と要素プロパティの使用の違いの完全な内訳については、この回答を参照してくださいonclick: addEventListener と onclick

ドキュメンテーション

于 2013-03-13T01:41:42.277 に答える
0

＃1の場合、次が必要です#：

$('#Test_Button1').click (function() {
    alert("Test Button 1 worked");
});

＃4も同じ：

$('#Test_Button4').click (function() {
    alert("Test Button 4 worked");
});

jQuery は CSS スタイルのセレクターを使用します。つまり、ID で項目を選択する場合は、#. クラスで選択する場合は、 を使用します.。

詳細はこちら: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

于 2013-03-13T01:33:12.343 に答える