10

こんにちは私はJQueryを学んでいて、ボタンのクリックイベントで関数をアタッチする小さな関数を作成しました。

これはHTMLのhead要素です

<script type="text/javascript">

    $(pageLoaded); 

    function pageLoaded() 
    {
        $("#Button1").bind("click", 
                            { key1: "value1", key2: "value2" }, 
                            function buttonClick(event) 
                            {
                               $("#displayArea").text(event.data.key1);
                            }
                            );
    }                    

</script>

これはHTMLの本文です

<input id="Button1" type="button" value="button" />

<div id = "displayArea" style="border:2px solid black; width:300px; height:200px">

このコードは正常に機能します。しかし、anonymusメソッドの外でbuttonClick関数を書き込もうとすると、機能しなくなります。

私はそれをこのように呼ぼうとしました：

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick(event));

function buttonClick(var event) 
{
      $("#displayArea").text(event.data.key1);
}

これは機能していません。イベントをパラメーターとして渡すときに何か間違いをしていませんか？匿名メソッドを使用せずにそれを行う正しい方法は何ですか？

4

4 に答える 4

15

function referenceクリックハンドラーとしてを渡す必要がありますが、ここで行っていること

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick(event));

buttonClick(event)すぐに呼び出して、それreturn undefinedをとして設定しclick handlerます。のような関数参照を渡すbuttonClick必要があり、イベントパラメータが自動的に取得されます（jQueryはハンドラーを呼び出すときにそれを送信します）。

完全なコード：

$(function(){
   $("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick);

   function buttonClick(event) 
    {
      $("#displayArea").text(event.data.key1);
    } ​
});

デモ： http： //jsfiddle.net/joycse06/cjc9r/

更新（@Tadeckのコメントに基づく）：

function expressionこのように使用すると、コードは正常に機能します

var buttonClick = function(event){
    $("#displayArea").text(event.data.key1);
};

そして、これをその上に配置する必要がありますfirst use。この場合前に

$("#Button1").bind("click", ...

のように現在のスコープの最上位にfunction expressionsないためです。だからあなたはそれらを使うことができます。hoistedfunction declarationonly afterexpressioninterpretedJS interpreter

于 2012-06-29T09:16:16.637 に答える
2

ソリューションには2つの間違いがあり、変更する必要があります

var関数のパラメーターではなく、変数を定義するためにのみ使用されます

function buttonClick(event)
{
    $("#displayArea").text(event.data.key1);
}

もう1つは、イベントハンドラーを割り当てる方法です。の戻り値を割り当てbuttonClick(event)ますundefined。関数自体を渡すだけです。eventオブジェクトはjQueryによって自動的に渡されます

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick);
于 2012-06-29T09:17:27.323 に答える
1

あなたは次のようにそれを行うことができます：

$('input[name="pin-code"], input[name="work-pin"]').on({
        keypress: function(e) {
            numbersOnly(e);   //function
        }
    });


function numbersOnly(e) {    //function
    e.preventDefault();
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }
}
于 2019-04-16T08:12:38.093 に答える
0

クリックイベント全体をパスした方法は次のとおりです。

$('#body').click({event}, onClickMethod);

function onClickMethod(evt){
    console.log("Click evt:", evt);
}
于 2020-03-07T19:04:07.597 に答える