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

我定义了一个类，如下所示：

(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

上触发change事件，该事件应将

newData

行添加到类中存储的

usersTable

问题是没有添加数据。我看到，如果我在

UsersHelper

之外声明变量

usersTable

，那么不使用

这个.usersTable

都可以正常工作

我做错了什么？

根据

当jQuery调用处理程序时，this关键字是对 事件交付的要素；对于直接绑定事件 这是附加事件和委派事件的元素 事件这是一个元素匹配选择器。（请注意，这可能不正确。） 如果事件已从子体冒泡，则等于event.target 元素）从元素创建jQuery对象，以便 与jQuery方法一起使用时，使用$（this）

您的问题是由错误的

范围引起的。在

处理程序jQuery上的

内部，将
此
绑定到导致当前事件的当前DOM元素。因此，您必须保存类的
this
本地范围，然后在
处理程序的
内部使用它，而不是
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
         });


      };

根据

当jQuery调用处理程序时，this关键字是对
事件交付的要素；对于直接绑定事件
这是附加事件和委派事件的元素
事件这是一个元素匹配选择器。（请注意，这可能不正确。）
如果事件已从子体冒泡，则等于event.target
元素）从元素创建jQuery对象，以便
与jQuery方法一起使用时，使用$（this）

您的问题是由错误的
范围引起的。在
处理程序jQuery上的
内部，将
此
绑定到导致当前事件的当前DOM元素。因此，您必须保存类的
this
本地范围，然后在
处理程序的
内部使用它，而不是
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
         });


      };

这不起作用，我尝试了您的解决方案，但正如您从我的代码中看到的那样，我将
此
绑定到事件处理程序。这很奇怪，因为如果我声明了没有这个的表，那么现在你有没有试着调试
That.usersTable
？是的，奇怪的是实例实际上是定义的，所以我在这方面没有问题，只是数据没有被添加。你能在JSFIDLE中重新创建这个问题吗？嗯，最后我解决了它。添加数据后，您忘记使用方法。根据的官方文档：请注意，为了查看表中的新行，必须调用draw（）方法，这可以通过DataTables API使用的链接轻松完成。这不起作用，我尝试了您的解决方案，但从我的代码中可以看出，我将
this
绑定到事件处理程序。这很奇怪，因为如果我声明了没有这个的表，那么现在你有没有试着调试
That.usersTable
？是的，奇怪的是实例实际上是定义的，所以我在这方面没有问题，只是数据没有被添加。你能在JSFIDLE中重新创建这个问题吗？嗯，最后我解决了它。添加数据后，您忘记使用方法。根据的官方文档：请注意，为了查看表中的新行，必须调用draw（）方法，这可以通过DataTables API使用的链接轻松完成。