オブジェクトリテラルのイベントハンドラが起動しない

Question

Wordpressプラグインを作成していて、すべてのロジックをカプセル化したいオブジェクトリテラルを作成しましたが、イベントハンドラを起動できないようです。私は

まずjQueryの1.7.1を使用しています

は、私はPHPを介して作成されているデータの行があります

<div class="table-wrapper"> 

    <?php 
     global $wpdb; 

     $students = $wpdb->get_results("SELECT studentID, lname, fname, email FROM student");  

    foreach($students as $student) : ?> 
    <div class="row" id="<?php echo $student->studentID; ?>" > 
     <div class="last_name"> 
      <h4><?php echo __($student->lname); ?></h4> 
     </div> 
     <div class="first_name"> 
      <h4><?php echo __($student->fname); ?></h4> 
     </div> 
     <div class="phone"> 
      <h4><?php echo __($student->phone); ?></h4> 
     </div> 
     <div class="email"> 
      <h4><?php echo __($student->email); ?></h4> 
     </div> 
    </div><!-- /row --> 
    <?php endforeach; ?> 
    <div id="new"> 
     <button id="new_student"><?php echo __('Add New Student'); ?></button> 
    </div> 
</div><!-- /table-wrapper --> 

をそして、これは私のjavascript/jqueryのファイルです：

var Student = { 
    init: function(config) { 
    this.config = config; 
    this.isDisplayed = false; 
    console.log('in init'); // this fires upon instantiation 
    this.bindEvents(); 
    }, 

    bindEvents: function(){ 
    console.log('in bind'); // this fires upon instantiation 
    this.config.studentSelection.on('click', '.row', this.config.fetchStudentDetails); 
    console.log('after'); // this does NOT fire 

    }, 

    fetchStudentDetails: function() { 
    var self = Student; 
    alert('in event'); // this does NOT fire 
    } 
}; 

Student.init({ 
    studentID: jQuery('.row').attr('id'), 
    studentSelection: jQuery('.table-wrapper') 
}); 

私はstudentSelection変数に '.row'を渡し、イベントハンドラをbindEventsメソッドで直接結び付けようとするようないくつかの小さなバリエーションを試しました：

bindEvents: function(){ 
    console.log('in bind'); // this fires upon instantiation 
    this.config.studentSelection.on('click', this.config.fetchStudentDetails); 
    console.log('after'); // this does NOT fire 
    }, 

Student.init({ 
    studentID: jQuery('.row').attr('id'), 
    studentSelection: jQuery('.row') 
}); 

私は、しかし、私はこのようなコードを書く時にクリックイベントを発射することができる午前：

jQuery('.row').click, function(){ 
    console.log('in click event'); 
}); 

誰でもいくつかの光を当てることができますので、もし私が、何が起こっているか理解していませんそれを正しい方向に向けると、本当に感謝しています。

Answer 1

thisの文脈はすべて間違っています。 this.config.studentSelectionはundefinedであり、this.config.fetchStudentDetailsである。 thisは、bindEventsを指し、initには該当しません。私はあなたがここで別のパターンを使用することをお勧めします。このようなもの：

var Student = function (config) { 

    config = config || {}; 

    var that = this, // In case you need to use the original `this` 
     isDisplayed = false; 

    var init = function() { 
     console.log('in init'); 
     bindEvents(); 
    }; 

    var bindEvents = function() { 
     console.log('in bind'); 
     config.studentSelection.on('click', '.row', fetchStudentDetails); 
     console.log('after'); 
    }; 

    var fetchStudentDetails = function() { 
     // var self = Student; <-- Use `that` 
     alert('in event'); 
    }; 

    return { 
     init: init, 
     bindEvents: bindEvents, 
     fetchStudentDetails: fetchStudentDetails 
    } 

}; 

// Create a new student 
var student = new Student({ ... }); 
student.init();