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");

이제 내 자동차의 드라이브 "메서드"에 이벤트를 바인딩하여 예를 들어 버튼을 클릭할 때마다 자동차 "클래스"의 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(...

그런 다음 클릭 이벤트 핸들러를 모든 항목에 연결합니다.