オブジェクト指向のjquery - イベントハンドラが動作しない

Question

いくつかのjquery関数をjavascriptオブジェクトに移動していくつかのコードをクリーンアップします。私の問題は、オブジェクトのコンストラクタにメソッドを置くと、イベントハンドラはイベントに応答しないようですが、ハンドラがヘルパーメソッドであり、オブジェクトのコンストラクタの外側にある場合にはうまく反応します。

ここではこれを使用するときは、私のコードが出てエラーや機能の実行の上console.log年代を入れていない

function MyConstructor() { 
    this.init(); 
    this.selectAllHandler(); 
} 

MyConstructor.prototype = { 
    init: function() { 
    $(document).on('click', '#my_element', this.selectAllHandler); 
    }, 
    selectAllHandler: function() { 
    // some code in here 
    } 
} 

が動作していない私のコードです。しかし、私がハンドラをトリガするものをクリックしようとすると、何もしません。

しかし、オブジェクトの外側のメソッドを使用してコンストラクタとして構築すると、正常に動作します。このように

function MyConstructor() { 
    this.init(); 
} 

MyConstructor.prototype = { 
    init: function() { 
    $(document).on('click', '#my_element', selectAllHandler); 
    } 
} 

function selectAllHandler() { 
    // code that works fine 
} 

私はオブジェクトのプロトタイプ内部でハンドラを呼び出すことができません。

編集

は、ここに私の新しいコードです。問題は現在、$(this)はコンストラクタを参照しているようで、クリックされた要素を参照していないようです。

function MyConstructor() { 
    this.init(); 
} 

MyConstructor.prototype = { 
    init: function() { 
    $(document).on('click', '#my_element', this.selectAllHandler.bind(this)); 
    }, 
    selectAllHandler: function() { 
     var checkboxes = $('.prospect_select_box'); 

     console.log($(this)); // => [MyConstructor] 

     if (!$(this).prop('checked')) { 
      console.log('here') 
      checkboxes.prop('checked', false); 
      $('#prospect-left-section').hide(); 
     } else { 
      console.log('other here') 
      checkboxes.prop('checked', true); 
      $('#prospect-left-section').show(); 
     } 
    } 
} 

Answer 1

あなたが興味を持っているオブジェクトは、構成オブジェクトとクリックされた要素の2つです。最初にメソッドselectAllHandlerを探し、その関数内で$(this)を使用する2番目のメソッドを見つける必要があります。明らかに両方とも同時にthisになることはできませんので、異なる方法でそれらの1つを参照する必要があります。

これはどのように行うことができます。

function MyConstructor() { 
 
    this.init(); 
 
} 
 

 
MyConstructor.prototype = { 
 
    init: function() { 
 
    var that = this; 
 
    $(document).on('click', '#my_element', function() { 
 
     that.selectAllHandler.call(this); 
 
    }); 
 
    }, 
 
    selectAllHandler: function() { 
 
    $(this).text('clicked!'); 
 
    } 
 
} 
 
    
 
new MyConstructor();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="my_element">click me</button>

callがselectAllHandlerはjQueryの要素として渡さものにthisセットで実行されますことを確認するために使用される方法に注意してください。

しかし、あなたはその周りに他の方法で行う、とthisとしてそれを使うが、それに渡されるイベントオブジェクトを経由してクリックされた要素を参照する、その後、またsetAllHandler内部thisで構築されたオブジェクトを参照する必要がある場合機能：

function MyConstructor() { 
 
    this.init(); 
 
} 
 

 
MyConstructor.prototype = { 
 
    init: function() { 
 
    var that = this; 
 
    $(document).on('click', '#my_element', this.selectAllHandler.bind(this)); 
 
    }, 
 
    selectAllHandler: function(e) { 
 
    var elem = e.target; 
 
    $(elem).text('clicked ' + this.other); 
 
    }, 
 
    other: 'me!' 
 
} 
 
    
 
new MyConstructor();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="my_element">click me</button>