jQueryオブジェクト指向のDOM要素を作成し、イベントリスナーを追加

Question

少し問題があります。私はオブジェクト内にいくつかの要素を作成しましたが、うまくいきます。しかし、今は私のオブジェクトの内部で関数を実行するためにいくつかのEventListenersを追加したいのですが、問題は "setSelection"という関数を実行できないことです。 （「this」はオブジェクトの「this」ではなく、クリック機能内のイベントの「this」です）。

function Object() { 
    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     $('td').click(function() { 
      // execute setSelection 
     }); 
    } 

    this.setSelection = function(x) { 
     alert('You clicked id ' + x); 
    } 
} 

$(document).ready(function() { 
    x = new Object(); 
    x.init(); 
}); 

Answer 1

あなたはclickイベントハンドラで使用できる変数に外側のスコープでthisの参照を格納することによってこの問題を解決することができます

function Object() { 
    var _this = this; 

    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     $('td').click(function() { 
      _this.doSomething(); 
     }); 
    } 

    this.setSelection = function(x) { 
     alert('You clicked id ' + x); 
    } 
} 

Answer 2

$('td').click((function(e) { 
     // execute setSelection 
     this.setSelection(...); 
    }).bind(this)); 

Answer 3

私のアプローチは次のようになります。

function Object() { 
    this.init = function() { 
    // delete table 
    // ... 
    // set table 
    $('tr').append('<td id="1">test</td>'); 

    $('td').click(function() { 
     setSelection(this); 
    }); 
    } 

    setSelection = function(x) { 
    alert('You clicked id ' + x); 
    } 
} 

Answer 4

私はこの問題を解決しました...

function Object() { 
    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     this.setSelection(); 
    } 

    this.setSelection = function() { 
     $('td').click(function() { 
      alert('You clicked id ' + $(this).attr('id')); 
     }); 
    } 
} 

$(document).ready(function() { 
    x = new Object(); 
    x.init(); 
});