分配给构造函数的 DataTable 不添加数据

Question

我已经定义了一个类如下：

(function() {
     'use strict';

      function UsersHelper(){
           this.init();
           this.usersTable = null;
      }

      UsersHelper.prototype.init = function(){

         $('#userType').on('change', function(){
              let newData = [{ 'name': 'foo' }];
              this.usersTable.row.add(newData);
         }.bind(this));

         this.initUserTable();
      };

      UsersHelper.prototype.initUserTable = function(){
          this.usersTable = $('#my-dataTable').DataTable({
                columns: [{
                     data: 'name'
                }], 
                destroy: true,
           });

          $('#userType').trigger('change');
      };
});

基本上我已经在类的构造函数中声明了字段usersTable，它实际上包含DataTable 实例，然后init 方法创建DataTable 并保存实例。

初始化完成后，我触发userType 上的更改事件，该事件应将newData 行添加到存储在类中的usersTable。

问题是没有添加数据。我看到如果我在UsersHelper 之外声明变量usersTable，那么不使用this.usersTable 一切正常。

我做错了什么？

Answer 1

根据official documentation

当 jQuery 调用处理程序时，this 关键字是对 传递事件的元素；对于直接绑定的事件 这是附加事件并用于委托的元素 events 这是一个元素匹配选择器。 （请注意，这可能不是 如果事件从后代冒泡，则等于 event.target element.) 从元素创建一个 jQuery 对象，以便它可以 与 jQuery 方法一起使用，使用 $( this )。

您的问题是由错误的this 范围引起的。在on 处理程序内部，jQuery 将this 绑定到导致当前事件的当前DOM 元素。所以你必须保存你类的 this 本地范围，然后在 on 处理程序中使用它而不是 this。

UsersHelper.prototype.init = function(){
       var that = this; // note this change
       this.initUserTable();
         $('#userType').on('change', function(){
              let newData = [{ 'name': 'foo' }];
              that.usersTable.row.add(newData); // use class context
         });


      };