对象文本中的事件处理程序未触发

Event handler in object literal not firing

本文关键字：程序 事件处理 文本 对象      更新时间：2023-09-26

我正在创建一个 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')
});

我已经尝试了一些小的变化，例如将".row"传递给studentSelection变量，并尝试在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');
});

我不明白发生了什么，所以如果有人能阐明它或指出我正确的方向，我将不胜感激。

你的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();
相关文章：