title: Binding lost instance on manual trigger
body: <p>I'm trying to store the instance of the <code>DataTable</code> declared inside the constructor, this seems working until I trigger the <code>change</code> event of a filter manually. Infact, I have a select <code>#filter</code> which populate the <code>DataTable</code> instance, if I do:</p>
  
  <pre><code>$('#filter').trigger('change');
  </code></pre>
  
  <p>I can see the <code>instance</code> of the <code>DataTable</code>, but if I manual change the select option I get as instance value <code>null</code>.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ContactHelper() {
    this.init();
    this.contactsTable = null;
  }
  
  ContactHelper.prototype.init = function() {
    console.log('initialized');
  
    $('#filter').on('change', function() {
      let newData = {
        'first_name': 'foo'
      };
      
      console.log(this.contactsTable);;
      this.contactsTable.row.add(newData);
    }.bind(this));
  
    this.initContactsTable();
  };
  
  ContactHelper.prototype.initContactsTable = function() {
    this.contactsTable = $('#my-dataTable').DataTable({
      columns: [{
          data: 'first_name'
        }
      ],
      destroy: true,
    });
  
    $('#filter').trigger('change');
  };
  
  $(document).ready(function() {
    let cHelper = new ContactHelper();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link  href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" &gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;table id="my-dataTable" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;select id="filter"&gt;
    &lt;option value="0"&gt;foo&lt;/option&gt;
    &lt;option value="1"&gt;foo2&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>as you can see I binded <code>this</code> to the <code>change</code> event, is something wrong in my code?</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/twx0bdfq/" rel="nofollow noreferrer">https://jsfiddle.net/twx0bdfq/</a></p>