web-dev-qa-db-ja.com

jQueryで既存のJavaScript関数をバインドする

JQueryを使用して、既存の関数をボタンにバインドしたいと思います。ドキュメントを読み、bindメソッドを見つけましたが、jQueryの例では、新しく作成された関数をバインドします。ここで、すでにハードコードされている関数をバインドします。例：

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction());
}


これは可能ですか？それとも私はこれを間違った方法で行っていますか？

javascriptjqueryevent-handling
22
Jack Mills

プレーンなfHardCodedFunctionはすでに関数を参照しており、接尾辞()はそれを呼び出すだけです。したがって、関数を呼び出す代わりに関数を渡すだけで、戻り値を渡すだけです。

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}
35
Gumbo

他の投稿から借用して、次のようにイベントハンドラーをパラメーター化できます。

function fHardCodedFunction(someValue) {
  alert(this.id + " - " + someValue);
}


function fBindFunctionToElement() {
  var someValue = "whatever";
  $("#MyButton").bind("click", 
       function() {
         fHardCodedFunction.apply(this, [someValue]);
       }
  );
}


$(document).ready
(
  function() {
    fBindFunctionToElement();
  }
);

ここではapplyを使用しています。これは、関数fHardCodedFunctionでthisプロパティがMyButton要素を参照するようにしたいためです。 applyは2番目のパラメーターの配列を想定していることにも注意してください。そのため、someValueを角かっこで囲んでいます。

この方法で行う必要はなく、必要に応じてこのthisプロパティを完全に忘れることができます。

4
David Andres

はい、別の場所に記述されたメソッドをバインドできますが、括弧は無視する必要があります。

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}
2
Canavar