jQuery でイベント ハンドラーをインスタンスにバインドするにはどうすればよいですか?

Question

jQueryを使用して、Javascript「クラス」の特定のインスタンスの「メソッド」にイベントをバインドしようとしています。要件は、イベント ハンドラーで「this」キーワードを使用して、最初にイベントをバインドしたインスタンスを参照できる必要があることです。

より詳細に、次のような「クラス」があるとします。

function Car(owner) {
  this.owner = owner;
}
Car.prototype = {
  drive: function() {
    alert("Driving "+this.owner+"s car!");
  }
}

そしてインスタンス:

var myCar = new Car("Bob");

ここで、イベントを車のドライブ「メソッド」にバインドして、たとえばボタンをクリックするたびに、Car「クラス」の myCar インスタンスでドライブ「メソッド」が呼び出されるようにしたいと考えています。

これまで、次の関数を使用して、「メソッド」の「this」キーワードを使用してインスタンスのメンバーに快適にアクセスできるクロージャを作成してきました。

function createHandler( obj, method ) {
  return function( event ) {
    return obj[method](event||window.event);
  }
}

私は次のように使用しました。

document.getElementById("myButton")
  .addEventListener("click", createHandler(myCar,"drive"));

JQuery を使用してこのようなことを実現するにはどうすればよいでしょうか?

私が特に尋ねているのは、「this」を指定されたインスタンスに関連付けることであり、私が自分で処理できるその他の難題です。

Answer 1

無名関数を使用するだけです。

$("#myButton").click(function() { myCar.drive(); });

Answer 2

これを試して ：

$("#myButton").each(function() {

var $btn = $(this);

    $btn.on('click',function(){

     // Do whatever you want.

    });
});

ここでは、最初にすべての #myButton 要素を対象とするループを作成します (この例では間違っています。代わりに Class を使用する必要があります)。

$(".myButton").each(...

次に、それらすべてにクリック イベント ハンドラーをアタッチします。