jquery - jQuery this でのイベント処理

Question

function Car(id) {
    var $this = this;

    this.init = function() {
        this.el = document.getElementById(id);
        $(this).on('keypress', function(e){
            alert(e.target);
        });
    }
}

alert決して起こりません。に変更$(this)した場合#hero。できます。理由がわかりません。

$(document).ready(function(){
    var hero = new Car("hero");
    hero.init();
});

Answer 1

要素は明らかthis.elにthisですが、親init()関数は次のとおりです。

function Car(id) {
    var $this = this; // you never use this ?

    this.init = function() {
        this.el = document.getElementById(id); // you set it to this.el
        $(this.el).on('keypress', function(e){ // so you should use that for the
            alert(e.target);                   // event handler as well
        });
    }
}

$(document).ready(function(){
    var hero = new Car("hero");
    hero.init();
});

フィドル

もちろん、これはより jQuery 風になります。

this.init = function() {
    $('#' + id).on('keypress', function(e) {
        alert(e.target);                   
    });
}

Answer 2

これを試して。イベントを関数にバインドし、要素にバインドします。

function Car(id) {
    var $this = this;

    this.init = function() {
        this.el = document.getElementById(id);
        $(this.el).on('keypress', function(e){  //changed in this line
            alert(e.target);
        });
    }
}